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#101010
  • activityBar.foreground#78a9ff
  • activityBar.inactiveForeground#707174
  • activityBarBadge.background#78a9ff
  • activityBarBadge.foreground#1a1a1a
  • badge.background#78a9ff
  • badge.foreground#1a1a1a
  • button.background#78a9ff
  • button.foreground#1a1a1a
  • button.hoverBackground#88b3ff
  • dropdown.background#101010
  • editor.background#161616
  • editor.findMatchBackground#78a9ff66
  • editor.findMatchHighlightBackground#78a9ff38
  • editor.foreground#dde1e6
  • editor.lineHighlightBackground#242424
  • editor.selectionBackground#78a9ff42
  • editorBracketMatch.border#78a9ff
  • editorCursor.foreground#78a9ff
  • editorGroupHeader.tabsBackground#141414
  • editorIndentGuide.activeBackground1#dde1e638
  • editorIndentGuide.background1#dde1e614
  • editorLineNumber.activeForeground#78a9ff
  • editorLineNumber.foreground#707174
  • editorSuggestWidget.selectedBackground#78a9ff42
  • editorWhitespace.foreground#dde1e61a
  • editorWidget.background#101010
  • focusBorder#78a9ff
  • input.background#101010
  • input.foreground#dde1e6
  • input.placeholderForeground#707174
  • list.activeSelectionBackground#78a9ff42
  • list.activeSelectionForeground#dde1e6
  • list.hoverBackground#242424
  • list.inactiveSelectionBackground#78a9ff24
  • panel.background#131313
  • panelTitle.activeForeground#78a9ff
  • scrollbarSlider.activeBackground#dde1e65c
  • scrollbarSlider.background#dde1e629
  • scrollbarSlider.hoverBackground#dde1e642
  • selection.background#78a9ff4d
  • sideBar.background#131313
  • sideBar.foreground#dde1e6
  • sideBarSectionHeader.background#161616
  • sideBarTitle.foreground#78a9ff
  • statusBar.background#101010
  • statusBar.foreground#dde1e6
  • statusBar.noFolderBackground#101010
  • tab.activeBackground#161616
  • tab.activeBorderTop#78a9ff
  • tab.activeForeground#78a9ff
  • tab.border#141414
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#707174
  • terminal.background#161616
  • terminal.foreground#dde1e6
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#dde1e6
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#707174

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6f6f6fitalic
string, string.quoted, string.template#42be65
constant.numeric, constant.language, constant.character#3ddbd9
keyword, keyword.control, storage, storage.type, storage.modifier#ff7eb6
entity.name.function, support.function, meta.function-call.generic#82cfff
variable, meta.definition.variable.name, variable.other.readwrite#dde1e6
variable.parameter, parameter#b9bcc1
entity.name.type, support.type, support.class, entity.name.namespace#ee5396
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#08bdba
keyword.operator#33b1ff
entity.name.tag, punctuation.definition.tag#ff7eb6
entity.other.attribute-name#82cfff
constant.other.color, support.constant#3ddbd9
entity.name.type.class#ee5396bold
markup.boldbold
markup.italicitalic
markup.heading#78a9ffbold
invalid#161616