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#050310
  • activityBar.border#140f1c
  • activityBar.foreground#00d8c0
  • activityBar.inactiveForeground#2a1a38
  • activityBarBadge.background#c0006a
  • activityBarBadge.foreground#ffffff
  • badge.background#c0006a
  • badge.foreground#ffffff
  • button.background#8a0060
  • button.foreground#ffffff
  • button.hoverBackground#aa0070
  • editor.background#0a0810
  • editor.findMatchBackground#00c8c860
  • editor.findMatchHighlightBackground#00c8c830
  • editor.foreground#c0a890
  • editor.inactiveSelectionBackground#00c8c820
  • editor.lineHighlightBackground#140f1c
  • editor.selectionBackground#00c8c840
  • editor.selectionHighlightBackground#00c8c820
  • editor.wordHighlightBackground#c800c820
  • editor.wordHighlightStrongBackground#c800c840
  • editorBracketMatch.background#00c8c840
  • editorBracketMatch.border#00ffee
  • editorCursor.foreground#00ffee
  • editorGroupHeader.tabsBackground#07050d
  • editorIndentGuide.activeBackground#3a1850
  • editorIndentGuide.background#16101e
  • editorLineNumber.activeForeground#00c8b0
  • editorLineNumber.foreground#3a2840
  • editorWhitespace.foreground#16101e
  • focusBorder#00c8b0
  • input.background#0f0a18
  • input.border#3a1858
  • input.foreground#c0a890
  • input.placeholderForeground#402838
  • list.activeSelectionBackground#160b28
  • list.activeSelectionForeground#00ffee
  • list.highlightForeground#00d8c0
  • list.hoverBackground#140f1c
  • panel.background#07050d
  • panel.border#140f1c
  • panelTitle.activeBorder#00c8b0
  • panelTitle.activeForeground#00d8c0
  • scrollbarSlider.activeBackground#00c8c870
  • scrollbarSlider.background#3a205060
  • scrollbarSlider.hoverBackground#00c8c840
  • sideBar.background#07050d
  • sideBar.border#140f1c
  • sideBar.foreground#907868
  • sideBarSectionHeader.background#0f0a18
  • sideBarSectionHeader.foreground#a09080
  • sideBarTitle.foreground#00d8c0
  • statusBar.background#1a0830
  • statusBar.foreground#00d8c0
  • statusBarItem.hoverBackground#2a1040
  • statusBarItem.remoteBackground#8a0048
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#0a0810
  • tab.activeBorderTop#00c8b0
  • tab.activeForeground#00ffee
  • tab.border#140f1c
  • tab.inactiveBackground#07050d
  • tab.inactiveForeground#402838
  • terminal.ansiBlue#0088ee
  • terminal.ansiBrightCyan#00ffee
  • terminal.ansiBrightMagenta#ff00cc
  • terminal.ansiCyan#00d8c0
  • terminal.ansiGreen#00cc88
  • terminal.ansiMagenta#ee0088
  • terminal.ansiRed#ff0066
  • terminal.ansiWhite#c0a890
  • terminal.ansiYellow#cc8820
  • terminal.background#07050d
  • terminal.foreground#c0a890
  • titleBar.activeBackground#050310
  • titleBar.activeForeground#c0a890
  • titleBar.border#140f1c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9070b0italic
keyword, storage.type, storage.modifier#00f0d8bold
keyword.control#00ffeebold
string, string.quoted#ff88aa
constant.character.escape, string.regexp#ffaacc
constant.numeric, constant.language, constant.other#dd88ff
entity.name.function, meta.function-call entity.name.function#60f8e8
variable.parameter#e0a8c0italic
variable, variable.other#d0b898
entity.name.type, entity.name.class, support.class#ff44eebold
entity.name.interface, entity.other.inherited-class#ee22ccitalic
variable.other.property, support.type.property-name#c8a890
keyword.operator#00d8c8
punctuation#806888
entity.name.tag#00c8b8
entity.other.attribute-name#ff66aa
meta.decorator, punctuation.decorator#ff44eeitalic
invalid#ff0066underline bold
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#00ffeebold
meta.structure.dictionary.value.json string.quoted, string.value.json#ff88aa
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#dd88ffbold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#60f8e8