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
Star Wars: Planets Theme Pack by Robert Schnable - VS Code Theme