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#ff7043
  • activityBar.background#150c0c
  • activityBar.foreground#ff7043
  • activityBarBadge.background#ff7043
  • activityBarBadge.foreground#1a0e0e
  • badge.background#ff7043
  • badge.foreground#1a0e0e
  • button.background#ff7043
  • button.foreground#1a0e0e
  • button.hoverBackground#ff845a
  • dropdown.background#221717
  • dropdown.border#333333
  • dropdown.foreground#d1c7c0
  • editor.background#1a0e0e
  • editor.findMatchBackground#ff704350
  • editor.findMatchHighlightBackground#ff845a40
  • editor.foreground#d1c7c0
  • editor.lineHighlightBackground#ff704320
  • editor.lineHighlightBorder#ff704340
  • editor.selectionBackground#ff704340
  • editor.selectionHighlightBackground#ff845a30
  • editorBracketMatch.background#ff845a20
  • editorBracketMatch.border#ff7043
  • editorCursor.foreground#ff7043
  • editorGroupHeader.tabsBackground#1a0e0e
  • editorIndentGuide.activeBackground#5c4a43
  • editorIndentGuide.background#33333355
  • editorLineNumber.activeForeground#ff7043
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#5c4a43
  • focusBorder#ff7043
  • gitDecoration.conflictingResourceForeground#ffb96b
  • gitDecoration.deletedResourceForeground#ff7043
  • gitDecoration.modifiedResourceForeground#ff7043
  • gitDecoration.untrackedResourceForeground#ff845a
  • input.background#221717
  • input.border#333333
  • input.foreground#d1c7c0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#ff7043
  • list.activeSelectionBackground#ff704340
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ff704330
  • list.highlightForeground#ff7043
  • list.hoverBackground#ff704320
  • minimap.background#1a0e0e
  • minimapSlider.activeBackground#ff704366
  • minimapSlider.background#ff704322
  • minimapSlider.hoverBackground#ff704344
  • panel.background#1a0e0e
  • panel.border#2b2020
  • panelTitle.activeBorder#ff7043
  • panelTitle.activeForeground#ff7043
  • panelTitle.inactiveForeground#8f7f77
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#5c4a43cc
  • scrollbarSlider.background#5c4a4388
  • scrollbarSlider.hoverBackground#5c4a43aa
  • sideBar.background#221717
  • sideBar.foreground#e0d5cf
  • sideBarSectionHeader.background#1e1515
  • sideBarSectionHeader.foreground#ff7043
  • sideBarTitle.foreground#ff7043
  • statusBar.background#2b2020
  • statusBar.debuggingBackground#ff7043
  • statusBar.foreground#f5efe6
  • statusBar.noFolderBackground#221717
  • statusBarItem.hoverBackground#ff845a80
  • tab.activeBackground#221717
  • tab.activeBorder#ff7043
  • tab.activeForeground#d1c7c0
  • tab.border#150c0c
  • tab.inactiveBackground#1a0e0e
  • tab.inactiveForeground#8f7f77
  • terminal.ansiBlue#5c9fd6
  • terminal.ansiBrightBlue#81c0ff
  • terminal.ansiBrightCyan#81e0c0
  • terminal.ansiBrightGreen#b3e98e
  • terminal.ansiBrightMagenta#d9a6ff
  • terminal.ansiBrightRed#ff8c66
  • terminal.ansiBrightYellow#ffd280
  • terminal.ansiCyan#5cc0a0
  • terminal.ansiGreen#8fbf58
  • terminal.ansiMagenta#c78ff5
  • terminal.ansiRed#ff7043
  • terminal.ansiYellow#ffb96b
  • terminal.background#1a0e0e
  • terminal.foreground#d1c7c0
  • titleBar.activeBackground#150c0c
  • titleBar.activeForeground#e0d5cf
  • titleBar.inactiveBackground#1a0e0e
  • titleBar.inactiveForeground#b0a39d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c4a43italic
string, string.quoted, string.template#ffb96b
keyword, storage.type, storage.modifier#ff7043bold
keyword.operator, punctuation.accessor#a68c7a
variable, variable.other#d1c7c0
variable.parameter#a68c7aitalic
entity.name.function, support.function#ffa572
meta.function-call#ffb185
entity.name.class, entity.name.type.class, support.class#ffb185bold
entity.name.type, support.type#c5b4a5
entity.name.type.interface#c5b4a5italic
constant.numeric#ffb96b
constant, constant.language, constant.character#ffb96b
constant.language.boolean#ffb96bbold
variable.other.property, support.variable.property#ffb96b
meta.object-literal.key#ffb96b
entity.name.tag, punctuation.definition.tag#ff7043
entity.other.attribute-name#a68c7aitalic
punctuation, meta.brace#d1c7c0
string.regexp#ffb96b
constant.character.escape#ff7043
meta.decorator, punctuation.decorator#ffb96b
invalid, invalid.illegal#ff7043strikethrough
markup.heading, entity.name.section#ff7043bold
markup.bold#ff7043bold
markup.italic#a68c7aitalic
markup.underline.link#ffa572
markup.inline.raw, markup.fenced_code#ffb96b
support.type.property-name.json#ff7043
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffa572
support.type.property-name.css#ffb96b
support.constant.property-value.css#ffb96b