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#e9e6df
  • activityBar.foreground#d2691e
  • activityBar.inactiveForeground#a1a09c
  • activityBarBadge.background#d2691e
  • activityBarBadge.foreground#ffffff
  • badge.background#d2691e
  • badge.foreground#ffffff
  • button.background#d2691e
  • button.foreground#ffffff
  • button.hoverBackground#bd5f1b
  • dropdown.background#e9e6df
  • editor.background#f5f2eb
  • editor.findMatchBackground#d2691e66
  • editor.findMatchHighlightBackground#d2691e38
  • editor.foreground#3b3b3b
  • editor.lineHighlightBackground#eceae3
  • editor.selectionBackground#d2691e38
  • editorBracketMatch.border#d2691e
  • editorCursor.foreground#d2691e
  • editorGroupHeader.tabsBackground#f0ede6
  • editorIndentGuide.activeBackground1#3b3b3b38
  • editorIndentGuide.background1#3b3b3b14
  • editorLineNumber.activeForeground#d2691e
  • editorLineNumber.foreground#a1a09c
  • editorSuggestWidget.selectedBackground#d2691e38
  • editorWhitespace.foreground#3b3b3b1a
  • editorWidget.background#e9e6df
  • focusBorder#d2691e
  • input.background#e9e6df
  • input.foreground#3b3b3b
  • input.placeholderForeground#a1a09c
  • list.activeSelectionBackground#d2691e38
  • list.activeSelectionForeground#3b3b3b
  • list.hoverBackground#eceae3
  • list.inactiveSelectionBackground#d2691e24
  • panel.background#efece5
  • panelTitle.activeForeground#d2691e
  • scrollbarSlider.activeBackground#3b3b3b5c
  • scrollbarSlider.background#3b3b3b29
  • scrollbarSlider.hoverBackground#3b3b3b42
  • selection.background#d2691e4d
  • sideBar.background#efece5
  • sideBar.foreground#3b3b3b
  • sideBarSectionHeader.background#f5f2eb
  • sideBarTitle.foreground#d2691e
  • statusBar.background#e9e6df
  • statusBar.foreground#3b3b3b
  • statusBar.noFolderBackground#e9e6df
  • tab.activeBackground#f5f2eb
  • tab.activeBorderTop#d2691e
  • tab.activeForeground#d2691e
  • tab.border#eeebe4
  • tab.inactiveBackground#f0ede6
  • tab.inactiveForeground#a1a09c
  • terminal.background#f5f2eb
  • terminal.foreground#3b3b3b
  • titleBar.activeBackground#e9e6df
  • titleBar.activeForeground#3b3b3b
  • titleBar.inactiveBackground#e9e6df
  • titleBar.inactiveForeground#a1a09c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#a39e93italic
string, string.quoted, string.template#618a3f
constant.numeric, constant.language, constant.character#9a6700
keyword, keyword.control, storage, storage.type, storage.modifier#a3324a
entity.name.function, support.function, meta.function-call.generic#b5651d
variable, meta.definition.variable.name, variable.other.readwrite#3b3b3b
variable.parameter, parameter#5c5c5b
entity.name.type, support.type, support.class, entity.name.namespace#8a6d1f
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#b5651d
keyword.operator#1f8a8a
entity.name.tag, punctuation.definition.tag#a3324a
entity.other.attribute-name#b5651d
constant.other.color, support.constant#9a6700
entity.name.type.class#8a6d1fbold
markup.boldbold
markup.italicitalic
markup.heading#d2691ebold
invalid#f5f2eb