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#09090b
  • activityBar.foreground#6c8cff
  • activityBar.inactiveForeground#5d5d62
  • activityBarBadge.background#6c8cff
  • activityBarBadge.foreground#ffffff
  • badge.background#6c8cff
  • badge.foreground#ffffff
  • button.background#6c8cff
  • button.foreground#ffffff
  • button.hoverBackground#7e9aff
  • dropdown.background#09090b
  • editor.background#0c0c0f
  • editor.findMatchBackground#6c8cff66
  • editor.findMatchHighlightBackground#6c8cff38
  • editor.foreground#c0c0c8
  • editor.lineHighlightBackground#1b1b1d
  • editor.selectionBackground#6c8cff42
  • editorBracketMatch.border#6c8cff
  • editorCursor.foreground#6c8cff
  • editorGroupHeader.tabsBackground#0b0b0e
  • editorIndentGuide.activeBackground1#c0c0c838
  • editorIndentGuide.background1#c0c0c814
  • editorLineNumber.activeForeground#6c8cff
  • editorLineNumber.foreground#5d5d62
  • editorSuggestWidget.selectedBackground#6c8cff42
  • editorWhitespace.foreground#c0c0c81a
  • editorWidget.background#09090b
  • focusBorder#6c8cff
  • input.background#09090b
  • input.foreground#c0c0c8
  • input.placeholderForeground#5d5d62
  • list.activeSelectionBackground#6c8cff42
  • list.activeSelectionForeground#c0c0c8
  • list.hoverBackground#1b1b1d
  • list.inactiveSelectionBackground#6c8cff24
  • panel.background#0a0a0d
  • panelTitle.activeForeground#6c8cff
  • scrollbarSlider.activeBackground#c0c0c85c
  • scrollbarSlider.background#c0c0c829
  • scrollbarSlider.hoverBackground#c0c0c842
  • selection.background#6c8cff4d
  • sideBar.background#0a0a0d
  • sideBar.foreground#c0c0c8
  • sideBarSectionHeader.background#0c0c0f
  • sideBarTitle.foreground#6c8cff
  • statusBar.background#09090b
  • statusBar.foreground#c0c0c8
  • statusBar.noFolderBackground#09090b
  • tab.activeBackground#0c0c0f
  • tab.activeBorderTop#6c8cff
  • tab.activeForeground#6c8cff
  • tab.border#0b0b0e
  • tab.inactiveBackground#0b0b0e
  • tab.inactiveForeground#5d5d62
  • terminal.background#0c0c0f
  • terminal.foreground#c0c0c8
  • titleBar.activeBackground#09090b
  • titleBar.activeForeground#c0c0c8
  • titleBar.inactiveBackground#09090b
  • titleBar.inactiveForeground#5d5d62

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4a4a55italic
string, string.quoted, string.template#9ad6a0
constant.numeric, constant.language, constant.character#e6c07a
keyword, keyword.control, storage, storage.type, storage.modifier#9aa5ff
entity.name.function, support.function, meta.function-call.generic#6c8cff
variable, meta.definition.variable.name, variable.other.readwrite#c0c0c8
variable.parameter, parameter#a0a0a7
entity.name.type, support.type, support.class, entity.name.namespace#7fc0ff
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#e68aa0
keyword.operator#6c8cff
entity.name.tag, punctuation.definition.tag#9aa5ff
entity.other.attribute-name#6c8cff
constant.other.color, support.constant#e6c07a
entity.name.type.class#7fc0ffbold
markup.boldbold
markup.italicitalic
markup.heading#6c8cffbold
invalid#0c0c0f