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#1b1d1f
  • activityBar.foreground#a7b0bb
  • activityBar.inactiveForeground#717477
  • activityBarBadge.background#a7b0bb
  • activityBarBadge.foreground#1a1a1a
  • badge.background#a7b0bb
  • badge.foreground#1a1a1a
  • button.background#a7b0bb
  • button.foreground#1a1a1a
  • button.hoverBackground#b2b9c3
  • dropdown.background#1b1d1f
  • editor.background#26282b
  • editor.findMatchBackground#a7b0bb66
  • editor.findMatchHighlightBackground#a7b0bb38
  • editor.foreground#cdd0d4
  • editor.lineHighlightBackground#333538
  • editor.selectionBackground#a7b0bb42
  • editorBracketMatch.border#a7b0bb
  • editorCursor.foreground#a7b0bb
  • editorGroupHeader.tabsBackground#222427
  • editorIndentGuide.activeBackground1#cdd0d438
  • editorIndentGuide.background1#cdd0d414
  • editorLineNumber.activeForeground#a7b0bb
  • editorLineNumber.foreground#717477
  • editorSuggestWidget.selectedBackground#a7b0bb42
  • editorWhitespace.foreground#cdd0d41a
  • editorWidget.background#1b1d1f
  • focusBorder#a7b0bb
  • input.background#1b1d1f
  • input.foreground#cdd0d4
  • input.placeholderForeground#717477
  • list.activeSelectionBackground#a7b0bb42
  • list.activeSelectionForeground#cdd0d4
  • list.hoverBackground#333538
  • list.inactiveSelectionBackground#a7b0bb24
  • panel.background#212225
  • panelTitle.activeForeground#a7b0bb
  • scrollbarSlider.activeBackground#cdd0d45c
  • scrollbarSlider.background#cdd0d429
  • scrollbarSlider.hoverBackground#cdd0d442
  • selection.background#a7b0bb4d
  • sideBar.background#212225
  • sideBar.foreground#cdd0d4
  • sideBarSectionHeader.background#26282b
  • sideBarTitle.foreground#a7b0bb
  • statusBar.background#1b1d1f
  • statusBar.foreground#cdd0d4
  • statusBar.noFolderBackground#1b1d1f
  • tab.activeBackground#26282b
  • tab.activeBorderTop#a7b0bb
  • tab.activeForeground#a7b0bb
  • tab.border#222427
  • tab.inactiveBackground#222427
  • tab.inactiveForeground#717477
  • terminal.background#26282b
  • terminal.foreground#cdd0d4
  • titleBar.activeBackground#1b1d1f
  • titleBar.activeForeground#cdd0d4
  • titleBar.inactiveBackground#1b1d1f
  • titleBar.inactiveForeground#717477

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6a6e74italic
string, string.quoted, string.template#aab2ba
constant.numeric, constant.language, constant.character#b6bcc4
keyword, keyword.control, storage, storage.type, storage.modifier#c4cad0
entity.name.function, support.function, meta.function-call.generic#dbe0e6
variable, meta.definition.variable.name, variable.other.readwrite#cdd0d4
variable.parameter, parameter#afb2b6
entity.name.type, support.type, support.class, entity.name.namespace#d2d8de
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#b8bec6
keyword.operator#a7b0bb
entity.name.tag, punctuation.definition.tag#c4cad0
entity.other.attribute-name#dbe0e6
constant.other.color, support.constant#b6bcc4
entity.name.type.class#d2d8debold
markup.boldbold
markup.italicitalic
markup.heading#a7b0bbbold
invalid#26282b