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#eee8e1
  • activityBar.foreground#907aa9
  • activityBar.inactiveForeground#b1abb9
  • activityBarBadge.background#907aa9
  • activityBarBadge.foreground#ffffff
  • badge.background#907aa9
  • badge.foreground#ffffff
  • button.background#907aa9
  • button.foreground#ffffff
  • button.hoverBackground#826e98
  • dropdown.background#eee8e1
  • editor.background#faf4ed
  • editor.findMatchBackground#907aa966
  • editor.findMatchHighlightBackground#907aa938
  • editor.foreground#575279
  • editor.lineHighlightBackground#f1ebe5
  • editor.selectionBackground#907aa938
  • editorBracketMatch.border#907aa9
  • editorCursor.foreground#907aa9
  • editorGroupHeader.tabsBackground#f5efe8
  • editorIndentGuide.activeBackground1#57527938
  • editorIndentGuide.background1#57527914
  • editorLineNumber.activeForeground#907aa9
  • editorLineNumber.foreground#b1abb9
  • editorSuggestWidget.selectedBackground#907aa938
  • editorWhitespace.foreground#5752791a
  • editorWidget.background#eee8e1
  • focusBorder#907aa9
  • input.background#eee8e1
  • input.foreground#575279
  • input.placeholderForeground#b1abb9
  • list.activeSelectionBackground#907aa938
  • list.activeSelectionForeground#575279
  • list.hoverBackground#f1ebe5
  • list.inactiveSelectionBackground#907aa924
  • panel.background#f4eee7
  • panelTitle.activeForeground#907aa9
  • scrollbarSlider.activeBackground#5752795c
  • scrollbarSlider.background#57527929
  • scrollbarSlider.hoverBackground#57527942
  • selection.background#907aa94d
  • sideBar.background#f4eee7
  • sideBar.foreground#575279
  • sideBarSectionHeader.background#faf4ed
  • sideBarTitle.foreground#907aa9
  • statusBar.background#eee8e1
  • statusBar.foreground#575279
  • statusBar.noFolderBackground#eee8e1
  • tab.activeBackground#faf4ed
  • tab.activeBorderTop#907aa9
  • tab.activeForeground#907aa9
  • tab.border#f3ede6
  • tab.inactiveBackground#f5efe8
  • tab.inactiveForeground#b1abb9
  • terminal.background#faf4ed
  • terminal.foreground#575279
  • titleBar.activeBackground#eee8e1
  • titleBar.activeForeground#575279
  • titleBar.inactiveBackground#eee8e1
  • titleBar.inactiveForeground#b1abb9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9893a5italic
string, string.quoted, string.template#56949f
constant.numeric, constant.language, constant.character#ea9d34
keyword, keyword.control, storage, storage.type, storage.modifier#286983
entity.name.function, support.function, meta.function-call.generic#d7827e
variable, meta.definition.variable.name, variable.other.readwrite#575279
variable.parameter, parameter#746f8e
entity.name.type, support.type, support.class, entity.name.namespace#907aa9
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#b4637a
keyword.operator#286983
entity.name.tag, punctuation.definition.tag#286983
entity.other.attribute-name#d7827e
constant.other.color, support.constant#ea9d34
entity.name.type.class#907aa9bold
markup.boldbold
markup.italicitalic
markup.heading#907aa9bold
invalid#faf4ed