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#050505
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#333333
  • activityBarBadge.background#FFFFFF
  • activityBarBadge.foreground#000000
  • badge.background#1F1F1F
  • badge.foreground#FFFFFF
  • button.background#1F1F1F
  • button.foreground#FFFFFF
  • button.hoverBackground#333333
  • dropdown.background#111111
  • dropdown.border#1F1F1F
  • dropdown.foreground#E8E8E8
  • editor.background#0A0A0A
  • editor.foreground#E8E8E8
  • editor.inactiveSelectionBackground#FFFFFF11
  • editor.lineHighlightBackground#141414
  • editor.selectionBackground#FFFFFF22
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#080808
  • editorLineNumber.activeForeground#888888
  • editorLineNumber.foreground#333333
  • editorWhitespace.foreground#1A1A1A
  • focusBorder#FFFFFF
  • input.background#111111
  • input.border#1F1F1F
  • input.foreground#E8E8E8
  • input.placeholderForeground#333333
  • list.activeSelectionBackground#1F1F1F
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#141414
  • list.hoverForeground#E8E8E8
  • list.inactiveSelectionBackground#111111
  • notifications.background#111111
  • notifications.border#1F1F1F
  • notifications.foreground#E8E8E8
  • panel.background#080808
  • panel.border#1F1F1F
  • panelTitle.activeBorder#FFFFFF
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#555555
  • progressBar.background#FFFFFF
  • scrollbarSlider.activeBackground#FFFFFF22
  • scrollbarSlider.background#1F1F1F77
  • scrollbarSlider.hoverBackground#33333355
  • sideBar.background#080808
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.foreground#AAAAAA
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#111111
  • statusBar.foreground#AAAAAA
  • statusBarItem.hoverBackground#1F1F1F
  • tab.activeBackground#0A0A0A
  • tab.activeBorderTop#FFFFFF
  • tab.activeForeground#FFFFFF
  • tab.border#141414
  • tab.inactiveBackground#080808
  • tab.inactiveForeground#555555
  • terminal.ansiBlack#0A0A0A
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiGreen#CCCCCC
  • terminal.ansiRed#AAAAAA
  • terminal.ansiWhite#E8E8E8
  • terminal.background#0A0A0A
  • terminal.foreground#E8E8E8
  • titleBar.activeBackground#050505
  • titleBar.activeForeground#E8E8E8
  • titleBar.inactiveBackground#050505

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#444444italic
variable, string constant.other.placeholder#E8E8E8
constant.other.color#FFFFFF
invalid, invalid.illegal#AAAAAAstrikethrough
keyword, storage.type, storage.modifier#FFFFFFbold
keyword.control, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template#888888
entity.name.tag, meta.tag.sgml#CCCCCC
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#DDDDDDbold
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit#AAAAAAitalic
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading#BBBBBB
entity.name, support.type, support.class, support.other.namespace.php#EEEEEEbold
support.type#CCCCCC
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name#AAAAAA
entity.other.attribute-name#BBBBBB
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#999999italic
string.regexp#AAAAAA
constant.character.escape#888888
*url*, *link*, *uri*underline
source.json meta.structure.dictionary.json support.type.property-name.json#FFFFFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CCCCCC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#AAAAAA
markup.heading, markup.heading entity.name#FFFFFFbold
markup.italic#BBBBBBitalic
markup.bold, markup.bold string#FFFFFFbold
markup.underline#AAAAAAunderline
markup.table#E8E8E8