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.activeBorder#B86B4C
  • activityBar.background#C9A66B
  • activityBar.foreground#3B3A36
  • activityBarBadge.background#B86B4C
  • activityBarBadge.foreground#F5EFE6
  • badge.background#B86B4C
  • badge.foreground#F5EFE6
  • button.background#C9A66B
  • button.foreground#F5EFE6
  • button.hoverBackground#B86B4C
  • dropdown.background#FFFFFF
  • dropdown.border#C9A66B
  • dropdown.foreground#3B3A36
  • editor.background#F5EFE6
  • editor.findMatchBackground#C9A66B80
  • editor.findMatchHighlightBackground#C9A66B40
  • editor.foreground#3B3A36
  • editor.lineHighlightBackground#F5EFE6AA
  • editor.lineHighlightBorder#C9A66B
  • editor.selectionBackground#B86B4C40
  • editor.selectionHighlightBackground#B86B4C20
  • editorBracketMatch.background#B86B4C30
  • editorBracketMatch.border#B86B4C
  • editorCursor.foreground#3B3A36
  • editorGroupHeader.tabsBackground#E8E6E3
  • editorIndentGuide.activeBackground#B86B4C
  • editorIndentGuide.background#D0CFCB
  • editorLineNumber.activeForeground#3B3A36
  • editorLineNumber.foreground#7A7874
  • editorWhitespace.foreground#A9A9A9
  • focusBorder#B86B4C
  • gitDecoration.conflictingResourceForeground#A074B7
  • gitDecoration.deletedResourceForeground#B86B4C
  • gitDecoration.modifiedResourceForeground#C9A66B
  • gitDecoration.untrackedResourceForeground#6A9F58
  • input.background#FFFFFF
  • input.border#C9A66B
  • input.foreground#3B3A36
  • input.placeholderForeground#7A7874
  • inputOption.activeBorder#B86B4C
  • list.activeSelectionBackground#C9A66B
  • list.activeSelectionForeground#F5EFE6
  • list.focusBackground#E8E6E3
  • list.highlightForeground#B86B4C
  • list.hoverBackground#E8E6E3
  • minimap.background#E8E6E3
  • minimapSlider.activeBackground#B86B4C
  • minimapSlider.background#C9A66B80
  • minimapSlider.hoverBackground#C9A66BA0
  • panel.background#F5EFE6
  • panel.border#C9A66B
  • panelTitle.activeBorder#B86B4C
  • panelTitle.activeForeground#3B3A36
  • panelTitle.inactiveForeground#7A7874
  • scrollbar.shadow#A9A9A9
  • scrollbarSlider.activeBackground#B86B4C
  • scrollbarSlider.background#C9A66B80
  • scrollbarSlider.hoverBackground#C9A66BA0
  • sideBar.background#E8E6E3
  • sideBar.foreground#3B3A36
  • sideBarSectionHeader.background#F5EFE6
  • sideBarSectionHeader.foreground#3B3A36
  • sideBarTitle.foreground#3B3A36
  • statusBar.background#C9A66B
  • statusBar.debuggingBackground#B86B4C
  • statusBar.foreground#F5EFE6
  • statusBar.noFolderBackground#E8E6E3
  • statusBarItem.hoverBackground#B86B4C80
  • tab.activeBackground#F5EFE6
  • tab.activeBorder#B86B4C
  • tab.activeForeground#3B3A36
  • tab.border#C9A66B
  • tab.inactiveBackground#E8E6E3
  • tab.inactiveForeground#7A7874
  • terminal.ansiBlue#5279C7
  • terminal.ansiBrightBlue#6A9FDA
  • terminal.ansiBrightCyan#7BD0C4
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#B58ECA
  • terminal.ansiBrightRed#D98671
  • terminal.ansiBrightYellow#E5B87F
  • terminal.ansiCyan#5FA8A0
  • terminal.ansiGreen#6A9F58
  • terminal.ansiMagenta#A074B7
  • terminal.ansiRed#B86B4C
  • terminal.ansiYellow#C9A66B
  • terminal.background#F5EFE6
  • terminal.foreground#3B3A36
  • titleBar.activeBackground#C9A66B
  • titleBar.activeForeground#F5EFE6
  • titleBar.inactiveBackground#E8E6E3
  • titleBar.inactiveForeground#3B3A36

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7874italic
string, string.quoted, string.template#6A9F58—
keyword, storage.type, storage.modifier#B86B4Cbold
keyword.operator, punctuation.accessor#C9A66B—
variable, variable.other#3B3A36—
variable.parameter#A074B7italic
entity.name.function, support.function#5279C7—
meta.function-call#6A9FDA—
entity.name.class, entity.name.type.class, support.class#5FA8A0bold
entity.name.type, support.type#A074B7—
entity.name.type.interface#5FA8A0italic
constant.numeric#C9A66B—
constant, constant.language, constant.character#B86B4C—
constant.language.boolean#B86B4Cbold
variable.other.property, support.variable.property#6A9F58—
meta.object-literal.key#5279C7—
entity.name.tag, punctuation.definition.tag#B86B4C—
entity.other.attribute-name#A074B7italic
punctuation, meta.brace#3B3A36—
string.regexp#A074B7—
constant.character.escape#C9A66B—
meta.decorator, punctuation.decorator#5FA8A0—
invalid, invalid.illegal#B86B4Cstrikethrough
markup.heading, entity.name.section#B86B4Cbold
markup.bold#B86B4Cbold
markup.italic#7A7874italic
markup.underline.link#5279C7—
markup.inline.raw, markup.fenced_code#6A9F58—
support.type.property-name.json#5279C7—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A074B7—
support.type.property-name.css#6A9F58—
support.constant.property-value.css#C9A66B—