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.background#080302
  • activityBar.border#2a100a
  • activityBar.foreground#ff5500
  • activityBar.inactiveForeground#5a2015
  • activityBarBadge.background#cc3300
  • activityBarBadge.foreground#0f0603
  • badge.background#cc3300
  • badge.foreground#0f0603
  • button.background#cc3300
  • button.foreground#0f0603
  • button.hoverBackground#dd4411
  • editor.background#0f0603
  • editor.findMatchBackground#cc330080
  • editor.findMatchHighlightBackground#cc330040
  • editor.foreground#e8b0a0
  • editor.inactiveSelectionBackground#7a200840
  • editor.lineHighlightBackground#1f0e08
  • editor.selectionBackground#7a200880
  • editor.selectionHighlightBackground#7a200840
  • editor.wordHighlightBackground#8a300840
  • editor.wordHighlightStrongBackground#8a300860
  • editorBracketMatch.background#8a300840
  • editorBracketMatch.border#cc4422
  • editorCursor.foreground#ff5500
  • editorGroupHeader.tabsBackground#0a0402
  • editorIndentGuide.activeBackground#7a2510
  • editorIndentGuide.background#2a100a
  • editorLineNumber.activeForeground#cc4422
  • editorLineNumber.foreground#5a2015
  • editorWhitespace.foreground#2a100a
  • focusBorder#cc3300
  • input.background#140806
  • input.border#4a1a10
  • input.foreground#e8b0a0
  • input.placeholderForeground#5a2015
  • inputOption.activeBackground#2a1008
  • inputOption.activeBorder#cc3300
  • list.activeSelectionBackground#2a1008
  • list.activeSelectionForeground#ff6633
  • list.focusBackground#2a1008
  • list.highlightForeground#ff5500
  • list.hoverBackground#1f0e08
  • list.inactiveSelectionBackground#1f0e08
  • panel.background#0a0402
  • panel.border#2a100a
  • panelTitle.activeBorder#cc3300
  • panelTitle.activeForeground#ff5500
  • panelTitle.inactiveForeground#5a2015
  • scrollbarSlider.activeBackground#7a3010a0
  • scrollbarSlider.background#2a100860
  • scrollbarSlider.hoverBackground#5a200880
  • sideBar.background#0a0402
  • sideBar.border#2a100a
  • sideBar.foreground#c09090
  • sideBarSectionHeader.background#140806
  • sideBarSectionHeader.foreground#d47060
  • sideBarTitle.foreground#ff5500
  • statusBar.background#cc3300
  • statusBar.foreground#0f0603
  • statusBarItem.hoverBackground#aa2a00
  • statusBarItem.remoteBackground#8a2200
  • statusBarItem.remoteForeground#f0c0a0
  • tab.activeBackground#0f0603
  • tab.activeBorderTop#cc3300
  • tab.activeForeground#ff6633
  • tab.border#2a100a
  • tab.inactiveBackground#0a0402
  • tab.inactiveForeground#6a3020
  • terminal.ansiBlue#6090b0
  • terminal.ansiGreen#6a8040
  • terminal.ansiRed#ff4400
  • terminal.ansiWhite#e8b0a0
  • terminal.ansiYellow#cc6600
  • terminal.background#0a0402
  • terminal.foreground#e8b0a0
  • titleBar.activeBackground#080302
  • titleBar.activeForeground#e8b0a0
  • titleBar.border#2a100a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9a5040italic
keyword, storage.type, storage.modifier#ff5500bold
keyword.control#ff3300bold
string, string.quoted#ff9966
constant.character.escape, string.regexp#ffb888
constant.numeric, constant.language, constant.other#ffdd88
entity.name.function, meta.function-call entity.name.function#ffaa77
variable.parameter#e08860italic
variable, variable.other#e0a890
entity.name.type, entity.name.class, support.class#ff7740bold
entity.name.interface, entity.other.inherited-class#ee6030italic
variable.other.property, support.type.property-name#d0b0a0
keyword.operator#ff5500
punctuation#aa6850
entity.name.tag#ff6640
entity.other.attribute-name#ffaa60
invalid#ffffffunderline bold
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#ff6630bold
meta.structure.dictionary.value.json string.quoted, string.value.json#ffaa77
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#ffee99bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#ffcc88