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#16161d
  • activityBar.foreground#7e9cd8
  • activityBar.inactiveForeground#74726a
  • activityBarBadge.background#7e9cd8
  • activityBarBadge.foreground#1a1a1a
  • badge.background#7e9cd8
  • badge.foreground#1a1a1a
  • button.background#7e9cd8
  • button.foreground#1a1a1a
  • button.hoverBackground#8da8dd
  • dropdown.background#16161d
  • editor.background#1f1f28
  • editor.findMatchBackground#7e9cd866
  • editor.findMatchHighlightBackground#7e9cd838
  • editor.foreground#dcd7ba
  • editor.lineHighlightBackground#2c2c35
  • editor.selectionBackground#7e9cd842
  • editorBracketMatch.border#7e9cd8
  • editorCursor.foreground#7e9cd8
  • editorGroupHeader.tabsBackground#1c1c24
  • editorIndentGuide.activeBackground1#dcd7ba38
  • editorIndentGuide.background1#dcd7ba14
  • editorLineNumber.activeForeground#7e9cd8
  • editorLineNumber.foreground#74726a
  • editorSuggestWidget.selectedBackground#7e9cd842
  • editorWhitespace.foreground#dcd7ba1a
  • editorWidget.background#16161d
  • focusBorder#7e9cd8
  • input.background#16161d
  • input.foreground#dcd7ba
  • input.placeholderForeground#74726a
  • list.activeSelectionBackground#7e9cd842
  • list.activeSelectionForeground#dcd7ba
  • list.hoverBackground#2c2c35
  • list.inactiveSelectionBackground#7e9cd824
  • panel.background#1b1b22
  • panelTitle.activeForeground#7e9cd8
  • scrollbarSlider.activeBackground#dcd7ba5c
  • scrollbarSlider.background#dcd7ba29
  • scrollbarSlider.hoverBackground#dcd7ba42
  • selection.background#7e9cd84d
  • sideBar.background#1b1b22
  • sideBar.foreground#dcd7ba
  • sideBarSectionHeader.background#1f1f28
  • sideBarTitle.foreground#7e9cd8
  • statusBar.background#16161d
  • statusBar.foreground#dcd7ba
  • statusBar.noFolderBackground#16161d
  • tab.activeBackground#1f1f28
  • tab.activeBorderTop#7e9cd8
  • tab.activeForeground#7e9cd8
  • tab.border#1c1c24
  • tab.inactiveBackground#1c1c24
  • tab.inactiveForeground#74726a
  • terminal.background#1f1f28
  • terminal.foreground#dcd7ba
  • titleBar.activeBackground#16161d
  • titleBar.activeForeground#dcd7ba
  • titleBar.inactiveBackground#16161d
  • titleBar.inactiveForeground#74726a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#727169italic
string, string.quoted, string.template#98bb6c
constant.numeric, constant.language, constant.character#d27e99
keyword, keyword.control, storage, storage.type, storage.modifier#957fb8
entity.name.function, support.function, meta.function-call.generic#7e9cd8
variable, meta.definition.variable.name, variable.other.readwrite#dcd7ba
variable.parameter, parameter#bab6a0
entity.name.type, support.type, support.class, entity.name.namespace#7aa89f
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#e6c384
keyword.operator#c0a36e
entity.name.tag, punctuation.definition.tag#957fb8
entity.other.attribute-name#7e9cd8
constant.other.color, support.constant#d27e99
entity.name.type.class#7aa89fbold
markup.boldbold
markup.italicitalic
markup.heading#7e9cd8bold
invalid#1f1f28