Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#19181a
  • activityBar.foreground#ffffff
  • activityBarBadge.background#7d3eeb
  • activityBarBadge.foreground#ffffff
  • badge.background#464c50
  • badge.foreground#ffffff
  • button.background#7d3eeb
  • button.foreground#ffffff
  • button.hoverBackground#9357fd
  • dropdown.background#373f44
  • dropdown.border#373f44
  • dropdown.foreground#c3c3c3
  • dropdown.listBackground#373f44
  • editor.background#20252a
  • editor.findMatchBackground#0c7d9d
  • editor.findMatchHighlightBackground#073a49
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#3c454a
  • editor.inactiveSelectionBackground#e98333
  • editor.lineHighlightBackground#242e32
  • editor.selectionBackground#0c69d8
  • editor.wordHighlightBackground#535e65
  • editorCursor.foreground#4c8ffc
  • editorError.foreground#d15d64
  • editorGroup.dropBackground#24292e
  • editorGroupHeader.tabsBackground#252526
  • editorHoverWidget.background#22272c
  • editorHoverWidget.border#3c454a
  • editorLineNumber.activeForeground#c3c3c3
  • editorLineNumber.foreground#ffffff
  • editorWhitespace.foreground#2d2d30
  • editorWidget.background#1a1e22
  • extensionButton.prominentBackground#7d3eeb
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#9357fd
  • focusBorder#24292e
  • foreground#c3c3c3
  • input.background#3b3b3e
  • input.foreground#c3c3c3
  • input.placeholderForeground#7f7f81
  • inputValidation.errorBackground#0c69d8
  • inputValidation.errorBorder#0c69d8
  • list.activeSelectionBackground#2a2d2e
  • list.focusBackground#2a2d2e
  • list.highlightForeground#3793fd
  • list.hoverBackground#2a2d2e
  • notificationCenter.border#19181a
  • notificationCenterHeader.background#1a1e22
  • notificationCenterHeader.foreground#ffffff
  • panel.background#20252a
  • panel.border#7d3eeb
  • panelTitle.activeBorder#7d3eeb
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#c3c3c3
  • pickerGroup.border#24292e
  • pickerGroup.foreground#3793fd
  • progressBar.background#7d3eeb
  • scrollbar.shadow#191919
  • settings.checkboxBackground#373f44
  • settings.checkboxBorder#373f44
  • settings.dropdownBackground#373f44
  • settings.dropdownBorder#24292e
  • settings.dropdownForeground#c0c0c0
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#0c69d8
  • settings.numberInputBackground#373f44
  • settings.numberInputBorder#24292e
  • settings.numberInputForeground#c0c0c0
  • settings.textInputBackground#373f44
  • settings.textInputBorder#24292e
  • settings.textInputForeground#c0c0c0
  • sideBar.background#373f44
  • sideBarSectionHeader.background#464c50
  • sideBarTitle.foreground#c3c3c3
  • statusBar.background#ffffff
  • statusBar.debuggingBackground#7d3eeb
  • statusBar.debuggingForegground#ffffff
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#000000
  • tab.activeBackground#20252a
  • tab.border#20252a
  • tab.inactiveBackground#252526
  • tab.inactiveForeground#a3a3a3
  • textLink.activeForeground#b690fc
  • textLink.foreground#9f7be1
  • walkThrough.embeddedEditorBackground#24292e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#ffffff
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdownbold
markup.italic.markdownitalic
meta.link.inline.markdown#c3c3c3underline
comment, markup.fenced_code, markup.inline#a3a3a3
string#af83a5
constant.numeric, constant.language, variable.language.this, variable.other.class, variable.other.constant, meta.property-name, meta.property-value, support#e8e8e8
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, support.type.property-name.json, punctuation.separator.key-value, punctuation.definition.template-expression#ed9a97
variable.parameter.function#e8be80
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#af83a5
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, keyword.other.template#98aa66
token.info-token#c3c3c3
token.warn-token#e8be80
token.error-token#ed9a97
token.debug-token#af83a5