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#161621
  • activityBar.foreground#cba6f7
  • activityBar.inactiveForeground#6d7187
  • activityBarBadge.background#cba6f7
  • activityBarBadge.foreground#1a1a1a
  • badge.background#cba6f7
  • badge.foreground#1a1a1a
  • button.background#cba6f7
  • button.foreground#1a1a1a
  • button.hoverBackground#d1b1f8
  • dropdown.background#161621
  • editor.background#1e1e2e
  • editor.findMatchBackground#cba6f766
  • editor.findMatchHighlightBackground#cba6f738
  • editor.foreground#cdd6f4
  • editor.lineHighlightBackground#2c2c3b
  • editor.selectionBackground#cba6f742
  • editorBracketMatch.border#cba6f7
  • editorCursor.foreground#cba6f7
  • editorGroupHeader.tabsBackground#1b1b29
  • editorIndentGuide.activeBackground1#cdd6f438
  • editorIndentGuide.background1#cdd6f414
  • editorLineNumber.activeForeground#cba6f7
  • editorLineNumber.foreground#6d7187
  • editorSuggestWidget.selectedBackground#cba6f742
  • editorWhitespace.foreground#cdd6f41a
  • editorWidget.background#161621
  • focusBorder#cba6f7
  • input.background#161621
  • input.foreground#cdd6f4
  • input.placeholderForeground#6d7187
  • list.activeSelectionBackground#cba6f742
  • list.activeSelectionForeground#cdd6f4
  • list.hoverBackground#2c2c3b
  • list.inactiveSelectionBackground#cba6f724
  • panel.background#1a1a28
  • panelTitle.activeForeground#cba6f7
  • scrollbarSlider.activeBackground#cdd6f45c
  • scrollbarSlider.background#cdd6f429
  • scrollbarSlider.hoverBackground#cdd6f442
  • selection.background#cba6f74d
  • sideBar.background#1a1a28
  • sideBar.foreground#cdd6f4
  • sideBarSectionHeader.background#1e1e2e
  • sideBarTitle.foreground#cba6f7
  • statusBar.background#161621
  • statusBar.foreground#cdd6f4
  • statusBar.noFolderBackground#161621
  • tab.activeBackground#1e1e2e
  • tab.activeBorderTop#cba6f7
  • tab.activeForeground#cba6f7
  • tab.border#1b1b29
  • tab.inactiveBackground#1b1b29
  • tab.inactiveForeground#6d7187
  • terminal.background#1e1e2e
  • terminal.foreground#cdd6f4
  • titleBar.activeBackground#161621
  • titleBar.activeForeground#cdd6f4
  • titleBar.inactiveBackground#161621
  • titleBar.inactiveForeground#6d7187

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6c7086italic
string, string.quoted, string.template#a6e3a1
constant.numeric, constant.language, constant.character#fab387
keyword, keyword.control, storage, storage.type, storage.modifier#cba6f7
entity.name.function, support.function, meta.function-call.generic#89b4fa
variable, meta.definition.variable.name, variable.other.readwrite#cdd6f4
variable.parameter, parameter#aeb5d0
entity.name.type, support.type, support.class, entity.name.namespace#f9e2af
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#f38ba8
keyword.operator#89dceb
entity.name.tag, punctuation.definition.tag#cba6f7
entity.other.attribute-name#89b4fa
constant.other.color, support.constant#fab387
entity.name.type.class#f9e2afbold
markup.boldbold
markup.italicitalic
markup.heading#cba6f7bold
invalid#1e1e2e