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#030208
  • activityBar.border#100e1a
  • activityBar.foreground#b060e8
  • activityBar.inactiveForeground#281838
  • activityBarBadge.background#7830b0
  • activityBarBadge.foreground#08060e
  • badge.background#7830b0
  • badge.foreground#08060e
  • button.background#5a18a0
  • button.foreground#e8d0ff
  • button.hoverBackground#6a28b0
  • editor.background#08060e
  • editor.findMatchBackground#8a3ab080
  • editor.findMatchHighlightBackground#8a3ab040
  • editor.foreground#c0a8e0
  • editor.inactiveSelectionBackground#5a2a8040
  • editor.lineHighlightBackground#100e1a
  • editor.selectionBackground#5a2a8080
  • editor.selectionHighlightBackground#5a2a8040
  • editor.wordHighlightBackground#6a2a9040
  • editor.wordHighlightStrongBackground#6a2a9060
  • editorBracketMatch.background#5a2a8040
  • editorBracketMatch.border#9050c0
  • editorCursor.foreground#c060ff
  • editorGroupHeader.tabsBackground#050410
  • editorIndentGuide.activeBackground#502870
  • editorIndentGuide.background#100e18
  • editorLineNumber.activeForeground#8050b0
  • editorLineNumber.foreground#302048
  • editorWhitespace.foreground#100e18
  • focusBorder#7830b0
  • input.background#0c0a18
  • input.border#301848
  • input.foreground#c0a8e0
  • input.placeholderForeground#402858
  • list.activeSelectionBackground#180e28
  • list.activeSelectionForeground#d070ff
  • list.highlightForeground#b060e8
  • list.hoverBackground#100e1a
  • panel.background#050410
  • panel.border#100e1a
  • panelTitle.activeBorder#7830b0
  • panelTitle.activeForeground#b060e8
  • scrollbarSlider.activeBackground#8a40b0a0
  • scrollbarSlider.background#5a2a8060
  • scrollbarSlider.hoverBackground#7a3aa080
  • sideBar.background#050410
  • sideBar.border#100e1a
  • sideBar.foreground#9070b8
  • sideBarSectionHeader.background#0c0a18
  • sideBarSectionHeader.foreground#a878cc
  • sideBarTitle.foreground#b060e8
  • statusBar.background#3a1860
  • statusBar.foreground#d0b0f0
  • statusBarItem.hoverBackground#4a2070
  • statusBarItem.remoteBackground#280e48
  • statusBarItem.remoteForeground#c090e8
  • tab.activeBackground#08060e
  • tab.activeBorderTop#7830b0
  • tab.activeForeground#d070ff
  • tab.border#100e1a
  • tab.inactiveBackground#050410
  • tab.inactiveForeground#402858
  • terminal.ansiBlue#6050c8
  • terminal.ansiCyan#7060c0
  • terminal.ansiGreen#5080a0
  • terminal.ansiMagenta#c040c0
  • terminal.ansiRed#cc3366
  • terminal.ansiWhite#c0a8e0
  • terminal.ansiYellow#9070d0
  • terminal.background#050410
  • terminal.foreground#c0a8e0
  • titleBar.activeBackground#030208
  • titleBar.activeForeground#c0a8e0
  • titleBar.border#100e1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8060a8italic
keyword, storage.type, storage.modifier#d070ffbold
keyword.control#e890ffbold
string, string.quoted#d060b8—
constant.character.escape, string.regexp#e880d0—
constant.numeric, constant.language, constant.other#e0c8ff—
entity.name.function, meta.function-call entity.name.function#e0a0ff—
variable.parameter#c080e0italic
variable, variable.other#d0a8e8—
entity.name.type, entity.name.class, support.class#f0a0ffbold
entity.name.interface, entity.other.inherited-class#e088f0italic
variable.other.property, support.type.property-name#c898d8—
keyword.operator#b858e8—
punctuation#9070a8—
entity.name.tag#a860d8—
entity.other.attribute-name#d870f0—
invalid#ff00ffunderline bold
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#e890ffbold
meta.structure.dictionary.value.json string.quoted, string.value.json#d060b8—
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#60f8d8bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#e0a0ff—