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#08060e
  • activityBar.border#1c1424
  • activityBar.foreground#ff9040
  • activityBar.inactiveForeground#3a2840
  • activityBarBadge.background#c05820
  • activityBarBadge.foreground#100c18
  • badge.background#c05820
  • badge.foreground#100c18
  • button.background#9a4828
  • button.foreground#f8e0c0
  • button.hoverBackground#aa5838
  • editor.background#100c18
  • editor.findMatchBackground#c0601080
  • editor.findMatchHighlightBackground#c0601040
  • editor.foreground#e0b890
  • editor.inactiveSelectionBackground#6a3a8040
  • editor.lineHighlightBackground#1c1424
  • editor.selectionBackground#6a3a8080
  • editor.selectionHighlightBackground#6a3a8040
  • editor.wordHighlightBackground#7a3a7040
  • editor.wordHighlightStrongBackground#7a3a7060
  • editorBracketMatch.background#6a3a8040
  • editorBracketMatch.border#c07040
  • editorCursor.foreground#ff9040
  • editorGroupHeader.tabsBackground#0c0912
  • editorIndentGuide.activeBackground#6a3060
  • editorIndentGuide.background#1e1428
  • editorLineNumber.activeForeground#c07840
  • editorLineNumber.foreground#4a3050
  • editorWhitespace.foreground#1e1428
  • focusBorder#c05820
  • input.background#160f1e
  • input.border#3a2848
  • input.foreground#e0b890
  • input.placeholderForeground#4a3050
  • list.activeSelectionBackground#221630
  • list.activeSelectionForeground#ffaa60
  • list.highlightForeground#ff9040
  • list.hoverBackground#1c1424
  • panel.background#0c0912
  • panel.border#1c1424
  • panelTitle.activeBorder#c05820
  • panelTitle.activeForeground#ff9040
  • scrollbarSlider.activeBackground#a05a90a0
  • scrollbarSlider.background#6a3a8060
  • scrollbarSlider.hoverBackground#8a4a9080
  • sideBar.background#0c0912
  • sideBar.border#1c1424
  • sideBar.foreground#b89080
  • sideBarSectionHeader.background#160f1e
  • sideBarSectionHeader.foreground#d09070
  • sideBarTitle.foreground#ff9040
  • statusBar.background#7a3060
  • statusBar.foreground#f0d0a0
  • statusBarItem.hoverBackground#8a4070
  • statusBarItem.remoteBackground#5a2048
  • statusBarItem.remoteForeground#f0c890
  • tab.activeBackground#100c18
  • tab.activeBorderTop#c05820
  • tab.activeForeground#ffaa60
  • tab.border#1c1424
  • tab.inactiveBackground#0c0912
  • tab.inactiveForeground#5a3848
  • terminal.ansiBlue#8060b0
  • terminal.ansiCyan#809090
  • terminal.ansiGreen#709050
  • terminal.ansiMagenta#c060a0
  • terminal.ansiRed#dd4466
  • terminal.ansiWhite#e0b890
  • terminal.ansiYellow#e08030
  • terminal.background#0c0912
  • terminal.foreground#e0b890
  • titleBar.activeBackground#08060e
  • titleBar.activeForeground#e0b890
  • titleBar.border#1c1424

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#907060italic
keyword, storage.type, storage.modifier#ff9840bold
keyword.control#ffb860bold
string, string.quoted#e888a0
constant.character.escape, string.regexp#f8a8c0
constant.numeric, constant.language, constant.other#d888e8
entity.name.function, meta.function-call entity.name.function#f8c080
variable.parameter#d8a868italic
variable, variable.other#e8c8a0
entity.name.type, entity.name.class, support.class#e878d0bold
entity.name.interface, entity.other.inherited-class#d060b8italic
variable.other.property, support.type.property-name#d8b888
keyword.operator#f08030
punctuation#a07870
entity.name.tag#e06868
entity.other.attribute-name#f8b860
invalid#ff4488underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#ffb860bold
meta.structure.dictionary.value.json string.quoted, string.value.json#e888a0
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#c8f0a0bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#f8c080