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#161428
  • activityBar.foreground#161428
  • activityBarBadge.background#c8a0e8
  • activityBarBadge.foreground#1c1a2e
  • button.background#c8a0e8
  • button.foreground#1c1a2e
  • editor.background#1c1a2e
  • editor.foreground#d5c8f0
  • editor.lineHighlightBackground#252240
  • editor.selectionBackground#3d3557
  • editor.selectionHighlightBackground#3d355788
  • editor.wordHighlightBackground#3d355766
  • editorCursor.foreground#c8a0e8
  • editorGroupHeader.tabsBackground#161428
  • editorIndentGuide.background1#3d3557
  • editorLineNumber.activeForeground#d5c8f0
  • editorLineNumber.foreground#3d3557
  • editorLink.activeForeground#c8a0e8
  • editorRuler.foreground#3d3557
  • editorWhitespace.foreground#3d3557
  • editorWidget.background#161428
  • input.background#1c1a2e
  • list.activeSelectionBackground#c8a0e8
  • list.activeSelectionForeground#fff
  • list.focusHighlightForeground#1c1a2e
  • list.highlightForeground#c8a0e8
  • list.hoverBackground#3d3557
  • list.inactiveSelectionBackground#c8a0e8
  • list.inactiveSelectionForeground#fff
  • panel.background#161428
  • quickInput.background#161428
  • sideBar.background#161428
  • sideBar.foreground#d5c8f0
  • sideBarSectionHeader.background#252240
  • sideBarSectionHeader.foreground#c8a0e8
  • sideBarTitle.foreground#c8a0e8
  • statusBar.background#252240
  • statusBar.foreground#d5c8f0
  • tab.activeBackground#1c1a2e
  • tab.activeForeground#d5c8f0
  • tab.inactiveBackground#161428
  • tab.inactiveForeground#ffffff
  • terminal.background#1c1a2e
  • terminal.foreground#d5c8f0
  • terminalCursor.foreground#c8a0e8
  • titleBar.activeBackground#161428

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control, keyword.operator.expression, keyword.operator.new, keyword.control.new, storage.type, storage.modifier, keyword.other.use, keyword.other.namespace, storage.modifier.extends, entity.other.inherited-class, variable.language, variable.language.this, variable.language.self, variable.language.super, variable.language.parent, variable.language punctuation.definition.variable.php, punctuation.definition.variable.php, keyword.control.php, keyword.control.flow, keyword.control.async-modifier, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.returnitalic
comment, punctuation.definition.comment#6e6a8aitalic
keyword, keyword.control, keyword.operator.expression#c8a0e8
storage, storage.type, storage.modifier#a0b8f0
variable#d5c8f0
variable.language#f5c0d0italic
string, string.quoted, punctuation.definition.string#a8e8c0
constant, constant.numeric, constant.language#f5d0a0
entity.name.function, support.function#90d0f5
entity.name.type.class, entity.name.class, support.class#f5b8d8
entity.other.inherited-class#f5b8d8italic
entity.name.tag#f5a0c0
entity.other.attribute-name#a0e8d8italic
support.type, support.class#a0b8f0
variable.parameter, entity.name.variable.parameteritalic
keyword.control.new, keyword.operator.newbold italic
markup.italicitalic
markup.boldbold
markup.heading#90d0f5bold