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#8b1e3a
  • activityBar.background#e0dad6
  • activityBar.foreground#2e2b28
  • activityBarBadge.background#8b1e3a
  • activityBarBadge.foreground#f5f2ef
  • badge.background#8b1e3a
  • badge.foreground#f5f2ef
  • button.background#8b1e3a
  • button.foreground#f5f2ef
  • button.hoverBackground#8b1e3aaa
  • dropdown.background#eae7e4
  • dropdown.border#ded9d6
  • dropdown.foreground#2e2b28
  • editor.background#f5f2ef
  • editor.findMatchBackground#2b6e4433
  • editor.findMatchHighlightBackground#2b6e4422
  • editor.foreground#2e2b28
  • editor.lineHighlightBackground#e0dad650
  • editor.lineHighlightBorder#e0dad680
  • editor.selectionBackground#8b1e3a33
  • editor.selectionHighlightBackground#8b1e3a22
  • editorBracketMatch.background#8b1e3a33
  • editorBracketMatch.border#8b1e3a
  • editorCursor.foreground#8b1e3a
  • editorGroupHeader.tabsBackground#eae7e4
  • editorIndentGuide.activeBackground#c9c3bf88
  • editorIndentGuide.background#c9c3bf44
  • editorLineNumber.activeForeground#2e2b28
  • editorLineNumber.foreground#a09e9c
  • editorWhitespace.foreground#c9c3bf
  • focusBorder#8b1e3a
  • gitDecoration.conflictingResourceForeground#ded9d6
  • gitDecoration.deletedResourceForeground#2e2b28
  • gitDecoration.modifiedResourceForeground#8b1e3a
  • gitDecoration.untrackedResourceForeground#2b6e44
  • input.background#eae7e4
  • input.border#ded9d6
  • input.foreground#2e2b28
  • input.placeholderForeground#a09e9c
  • inputOption.activeBorder#8b1e3a
  • list.activeSelectionBackground#c9c3bf
  • list.activeSelectionForeground#2e2b28
  • list.focusBackground#c9c3bf55
  • list.highlightForeground#8b1e3a
  • list.hoverBackground#c9c3bf44
  • minimap.background#f5f2ef
  • minimapSlider.activeBackground#8b1e3a66
  • minimapSlider.background#8b1e3a22
  • minimapSlider.hoverBackground#8b1e3a44
  • panel.background#f5f2ef
  • panel.border#ded9d6
  • panelTitle.activeBorder#8b1e3a
  • panelTitle.activeForeground#2e2b28
  • panelTitle.inactiveForeground#a09e9c
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#8b1e3a88
  • scrollbarSlider.background#a09e9c44
  • scrollbarSlider.hoverBackground#a09e9c88
  • sideBar.background#eae7e4
  • sideBar.foreground#2e2b28
  • sideBarSectionHeader.background#ded9d6
  • sideBarSectionHeader.foreground#8b1e3a
  • sideBarTitle.foreground#8b1e3a
  • statusBar.background#c9c3bf
  • statusBar.debuggingBackground#8b1e3a
  • statusBar.foreground#2e2b28
  • statusBar.noFolderBackground#e0dad6
  • statusBarItem.hoverBackground#8b1e3a55
  • tab.activeBackground#f5f2ef
  • tab.activeBorder#8b1e3a
  • tab.activeForeground#2e2b28
  • tab.border#ded9d6
  • tab.inactiveBackground#e5e2df
  • tab.inactiveForeground#7a7a7a
  • terminal.ansiBlue#2b6e44
  • terminal.ansiBrightBlue#5a8d5a
  • terminal.ansiBrightCyan#b8b0a4
  • terminal.ansiBrightGreen#5a9d5a
  • terminal.ansiBrightMagenta#9b5d7a
  • terminal.ansiBrightRed#4b4b4b
  • terminal.ansiBrightYellow#d0d0d0
  • terminal.ansiCyan#c9c3bf
  • terminal.ansiGreen#2b6e44
  • terminal.ansiMagenta#8b1e3a
  • terminal.ansiRed#2e2b28
  • terminal.ansiYellow#ded9d6
  • terminal.background#f5f2ef
  • terminal.foreground#2e2b28
  • titleBar.activeBackground#ded9d6
  • titleBar.activeForeground#2e2b28
  • titleBar.inactiveBackground#e5e2df
  • titleBar.inactiveForeground#7a7a7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a09e9citalic
string, string.quoted, string.template#2b6e44
keyword, storage.type, storage.modifier#8b1e3abold
keyword.operator, punctuation.accessor#c9c3bf
variable, variable.other#2e2b28
variable.parameter#c9c3bfitalic
entity.name.function, support.function#8b1e3a
meta.function-call#5a8d5a
entity.name.class, entity.name.type.class, support.class#8b1e3abold
entity.name.type, support.type#5a8d5a
entity.name.type.interface#5a8d5aitalic
constant.numeric#5a8d5a
constant, constant.language, constant.character#c9c3bf
constant.language.boolean#8b1e3abold
variable.other.property, support.variable.property#5a8d5a
meta.object-literal.key#5a8d5a
entity.name.tag, punctuation.definition.tag#8b1e3a
entity.other.attribute-name#c9c3bfitalic
punctuation, meta.brace#a09e9c
string.regexp#5a8d5a
constant.character.escape#c9c3bf
meta.decorator, punctuation.decorator#ded9d6
invalid, invalid.illegal#2e2b28strikethrough
markup.heading, entity.name.section#8b1e3abold
markup.bold#8b1e3abold
markup.italic#5a8d5aitalic
markup.underline.link#2b6e44
markup.inline.raw, markup.fenced_code#5a8d5a
support.type.property-name.json#8b1e3a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8b1e3a
support.type.property-name.css#5a8d5a
support.constant.property-value.css#2b6e44