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—