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—