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#B84A15
  • activityBar.background#E2D6C8
  • activityBar.foreground#3A3A3A
  • activityBarBadge.background#B84A15
  • activityBarBadge.foreground#FAF5E9
  • badge.background#B84A15
  • badge.foreground#FAF5E9
  • button.background#B84A15
  • button.foreground#FAF5E9
  • button.hoverBackground#A13C0F
  • dropdown.background#F0E9DD
  • dropdown.border#E2D6C8
  • dropdown.foreground#3A3A3A
  • editor.background#FAF5E9
  • editor.findMatchBackground#A13C0F55
  • editor.findMatchHighlightBackground#A13C0F33
  • editor.foreground#3A3A3A
  • editor.lineHighlightBackground#E5D6C866
  • editor.lineHighlightBorder#E5D6C8AA
  • editor.selectionBackground#B84A1555
  • editor.selectionHighlightBackground#B84A1533
  • editorBracketMatch.background#B84A1533
  • editorBracketMatch.border#B84A15
  • editorCursor.foreground#B84A15
  • editorGroupHeader.tabsBackground#F0E9DD
  • editorIndentGuide.activeBackground#B0B8C088
  • editorIndentGuide.background#B0B8C044
  • editorLineNumber.activeForeground#B84A15
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#9FA8A8
  • focusBorder#B84A15
  • gitDecoration.conflictingResourceForeground#C97F44
  • gitDecoration.deletedResourceForeground#B84A15
  • gitDecoration.modifiedResourceForeground#B84A15
  • gitDecoration.untrackedResourceForeground#5A937A
  • input.background#F0E9DD
  • input.border#E2D6C8
  • input.foreground#3A3A3A
  • input.placeholderForeground#9FA8A8
  • inputOption.activeBorder#B84A15
  • list.activeSelectionBackground#B84A15
  • list.activeSelectionForeground#FAF5E9
  • list.focusBackground#B84A1555
  • list.highlightForeground#B84A15
  • list.hoverBackground#B84A1577
  • minimap.background#FAF5E9
  • minimapSlider.activeBackground#B84A1666
  • minimapSlider.background#B84A1522
  • minimapSlider.hoverBackground#B84A1544
  • panel.background#FAF5E9
  • panel.border#E2D6C8
  • panelTitle.activeBorder#B84A15
  • panelTitle.activeForeground#B84A15
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#777777AA
  • scrollbarSlider.background#77777744
  • scrollbarSlider.hoverBackground#77777788
  • sideBar.background#F0E9DD
  • sideBar.foreground#3A3A3A
  • sideBarSectionHeader.background#F0E9DD
  • sideBarSectionHeader.foreground#B84A15
  • sideBarTitle.foreground#B84A15
  • statusBar.background#B84A15
  • statusBar.debuggingBackground#A13C0F
  • statusBar.foreground#FAF5E9
  • statusBar.noFolderBackground#A13C0F
  • statusBarItem.hoverBackground#8E3812
  • tab.activeBackground#FAF5E9
  • tab.activeBorder#B84A15
  • tab.activeForeground#3A3A3A
  • tab.border#D8CBBE
  • tab.inactiveBackground#F0E9DD
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#3A5A7C
  • terminal.ansiBrightBlue#5679A2
  • terminal.ansiBrightCyan#81B2A5
  • terminal.ansiBrightGreen#71B5A4
  • terminal.ansiBrightMagenta#A8624D
  • terminal.ansiBrightRed#D7541F
  • terminal.ansiBrightYellow#E08B5F
  • terminal.ansiCyan#6C9E96
  • terminal.ansiGreen#5A937A
  • terminal.ansiMagenta#8E4A6A
  • terminal.ansiRed#B84A15
  • terminal.ansiYellow#C97F44
  • terminal.background#FAF5E9
  • terminal.foreground#3A3A3A
  • titleBar.activeBackground#F0E9DD
  • titleBar.activeForeground#3A3A3A
  • titleBar.inactiveBackground#E2D6C8
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9FA8A8italic
string, string.quoted, string.template#5A937A
keyword, storage.type, storage.modifier#B84A15bold
keyword.operator, punctuation.accessor#C97F44
variable, variable.other#3A3A3A
variable.parameter#C97F44italic
entity.name.function, support.function#3F7A71
meta.function-call#B84A15
entity.name.class, entity.name.type.class, support.class#B84A15bold
entity.name.type, support.type#3A3A3A
entity.name.type.interface#5A937Aitalic
constant.numeric#C97F44
constant, constant.language, constant.character#C97F44
constant.language.boolean#B84A15bold
variable.other.property, support.variable.property#5A937A
meta.object-literal.key#B84A15
entity.name.tag, punctuation.definition.tag#B84A15
entity.other.attribute-name#C97F44italic
punctuation, meta.brace#3A3A3A
string.regexp#5A937A
constant.character.escape#C97F44
meta.decorator, punctuation.decorator#8E4A6A
invalid, invalid.illegal#B84A15strikethrough
markup.heading, entity.name.section#B84A15bold
markup.bold#B84A15bold
markup.italic#C97F44italic
markup.underline.link#5A937A
markup.inline.raw, markup.fenced_code#5A937A
support.type.property-name.json#B84A15
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8E4A6A
support.type.property-name.css#5A937A
support.constant.property-value.css#C97F44