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