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#e8e8e8
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#999999
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#ffffff
  • badge.background#000000
  • badge.foreground#ffffff
  • button.background#000000
  • button.foreground#ffffff
  • button.hoverBackground#000000
  • dropdown.background#e8e8e8
  • editor.background#f4f4f4
  • editor.findMatchBackground#00000066
  • editor.findMatchHighlightBackground#00000038
  • editor.foreground#2a2a2a
  • editor.lineHighlightBackground#ebebeb
  • editor.selectionBackground#00000038
  • editorBracketMatch.border#000000
  • editorCursor.foreground#000000
  • editorGroupHeader.tabsBackground#efefef
  • editorIndentGuide.activeBackground1#2a2a2a38
  • editorIndentGuide.background1#2a2a2a14
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#999999
  • editorSuggestWidget.selectedBackground#00000038
  • editorWhitespace.foreground#2a2a2a1a
  • editorWidget.background#e8e8e8
  • focusBorder#000000
  • input.background#e8e8e8
  • input.foreground#2a2a2a
  • input.placeholderForeground#999999
  • list.activeSelectionBackground#00000038
  • list.activeSelectionForeground#2a2a2a
  • list.hoverBackground#ebebeb
  • list.inactiveSelectionBackground#00000024
  • panel.background#eeeeee
  • panelTitle.activeForeground#000000
  • scrollbarSlider.activeBackground#2a2a2a5c
  • scrollbarSlider.background#2a2a2a29
  • scrollbarSlider.hoverBackground#2a2a2a42
  • selection.background#0000004d
  • sideBar.background#eeeeee
  • sideBar.foreground#2a2a2a
  • sideBarSectionHeader.background#f4f4f4
  • sideBarTitle.foreground#000000
  • statusBar.background#e8e8e8
  • statusBar.foreground#2a2a2a
  • statusBar.noFolderBackground#e8e8e8
  • tab.activeBackground#f4f4f4
  • tab.activeBorderTop#000000
  • tab.activeForeground#000000
  • tab.border#ededed
  • tab.inactiveBackground#efefef
  • tab.inactiveForeground#999999
  • terminal.background#f4f4f4
  • terminal.foreground#2a2a2a
  • titleBar.activeBackground#e8e8e8
  • titleBar.activeForeground#2a2a2a
  • titleBar.inactiveBackground#e8e8e8
  • titleBar.inactiveForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9a9a9aitalic
string, string.quoted, string.template#5a5a5a
constant.numeric, constant.language, constant.character#3a3a3a
keyword, keyword.control, storage, storage.type, storage.modifier#101010
entity.name.function, support.function, meta.function-call.generic#0a0a0a
variable, meta.definition.variable.name, variable.other.readwrite#2a2a2a
variable.parameter, parameter#4e4e4e
entity.name.type, support.type, support.class, entity.name.namespace#222222
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#4a4a4a
keyword.operator#6a6a6a
entity.name.tag, punctuation.definition.tag#101010
entity.other.attribute-name#0a0a0a
constant.other.color, support.constant#3a3a3a
entity.name.type.class#222222bold
markup.boldbold
markup.italicitalic
markup.heading#000000bold
invalid#f4f4f4