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#000000
  • activityBar.foreground#bb86fc
  • activityBar.inactiveForeground#5c5c5c
  • activityBarBadge.background#bb86fc
  • activityBarBadge.foreground#1a1a1a
  • badge.background#bb86fc
  • badge.foreground#1a1a1a
  • button.background#bb86fc
  • button.foreground#1a1a1a
  • button.hoverBackground#c395fc
  • dropdown.background#000000
  • editor.background#000000
  • editor.findMatchBackground#bb86fc66
  • editor.findMatchHighlightBackground#bb86fc38
  • editor.foreground#cccccc
  • editor.lineHighlightBackground#0f0f0f
  • editor.selectionBackground#bb86fc42
  • editorBracketMatch.border#bb86fc
  • editorCursor.foreground#bb86fc
  • editorGroupHeader.tabsBackground#000000
  • editorIndentGuide.activeBackground1#cccccc38
  • editorIndentGuide.background1#cccccc14
  • editorLineNumber.activeForeground#bb86fc
  • editorLineNumber.foreground#5c5c5c
  • editorSuggestWidget.selectedBackground#bb86fc42
  • editorWhitespace.foreground#cccccc1a
  • editorWidget.background#000000
  • focusBorder#bb86fc
  • input.background#000000
  • input.foreground#cccccc
  • input.placeholderForeground#5c5c5c
  • list.activeSelectionBackground#bb86fc42
  • list.activeSelectionForeground#cccccc
  • list.hoverBackground#0f0f0f
  • list.inactiveSelectionBackground#bb86fc24
  • panel.background#000000
  • panelTitle.activeForeground#bb86fc
  • scrollbarSlider.activeBackground#cccccc5c
  • scrollbarSlider.background#cccccc29
  • scrollbarSlider.hoverBackground#cccccc42
  • selection.background#bb86fc4d
  • sideBar.background#000000
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#000000
  • sideBarTitle.foreground#bb86fc
  • statusBar.background#000000
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorderTop#bb86fc
  • tab.activeForeground#bb86fc
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#5c5c5c
  • terminal.background#000000
  • terminal.foreground#cccccc
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#cccccc
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#5c5c5c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5a5a5aitalic
string, string.quoted, string.template#03dac6
constant.numeric, constant.language, constant.character#ffb86c
keyword, keyword.control, storage, storage.type, storage.modifier#bb86fc
entity.name.function, support.function, meta.function-call.generic#82aaff
variable, meta.definition.variable.name, variable.other.readwrite#cccccc
variable.parameter, parameter#a7a7a7
entity.name.type, support.type, support.class, entity.name.namespace#03dac6
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#cf6679
keyword.operator#cf6679
entity.name.tag, punctuation.definition.tag#bb86fc
entity.other.attribute-name#82aaff
constant.other.color, support.constant#ffb86c
entity.name.type.class#03dac6bold
markup.boldbold
markup.italicitalic
markup.heading#bb86fcbold
invalid#000000