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#0f0f0f
  • activityBar.foreground#7CB87A
  • activityBar.inactiveForeground#2A4A2A
  • activityBarBadge.background#7CB87A
  • activityBarBadge.foreground#0D1A0F
  • badge.background#2D5A27
  • badge.foreground#D4E6C3
  • button.background#2D5A27
  • button.foreground#D4E6C3
  • button.hoverBackground#7CB87A
  • dropdown.background#112214
  • dropdown.border#1E3D20
  • dropdown.foreground#D4E6C3
  • editor.background#020202
  • editor.foreground#D4E6C3
  • editor.inactiveSelectionBackground#2D5A2722
  • editor.lineHighlightBackground#132918
  • editor.selectionBackground#2D5A2744
  • editorCursor.foreground#7CB87A
  • editorGroupHeader.tabsBackground#0A150C
  • editorLineNumber.activeForeground#7CB87A
  • editorLineNumber.foreground#2A4A2A
  • editorWhitespace.foreground#1A3A1A
  • focusBorder#7CB87A
  • input.background#112214
  • input.border#1E3D20
  • input.foreground#D4E6C3
  • input.placeholderForeground#2A4A2A
  • list.activeSelectionBackground#1E3D20
  • list.activeSelectionForeground#7CB87A
  • list.hoverBackground#132918
  • list.hoverForeground#D4E6C3
  • list.inactiveSelectionBackground#112214
  • notifications.background#112214
  • notifications.border#1E3D20
  • notifications.foreground#D4E6C3
  • panel.background#131313
  • panel.border#1E3D20
  • panelTitle.activeBorder#7CB87A
  • panelTitle.activeForeground#7CB87A
  • panelTitle.inactiveForeground#4A7A4A
  • progressBar.background#7CB87A
  • scrollbarSlider.activeBackground#7CB87A55
  • scrollbarSlider.background#1E3D2077
  • scrollbarSlider.hoverBackground#2D5A2755
  • sideBar.background#0a0a0a
  • sideBar.foreground#B8D4A8
  • sideBarSectionHeader.background#112214
  • sideBarSectionHeader.foreground#7CB87A
  • sideBarTitle.foreground#7CB87A
  • statusBar.background#112214
  • statusBar.foreground#7CB87A
  • statusBarItem.hoverBackground#1E3D20
  • tab.activeBackground#0D1A0F
  • tab.activeBorderTop#7CB87A
  • tab.activeForeground#7CB87A
  • tab.border#132918
  • tab.inactiveBackground#0A150C
  • tab.inactiveForeground#4A7A4A
  • terminal.ansiCyan#5FAD8E
  • terminal.ansiGreen#7CB87A
  • terminal.ansiRed#C45A5A
  • terminal.ansiYellow#C4A35A
  • terminal.background#0c0c0c
  • terminal.foreground#D4E6C3
  • titleBar.activeBackground#070707
  • titleBar.activeForeground#D4E6C3
  • titleBar.inactiveBackground#081009

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#2A4A2Aitalic
variable, string constant.other.placeholder#D4E6C3
constant.other.color#7CB87A
invalid, invalid.illegal#C45A5A
keyword, storage.type, storage.modifier#7CB87Abold
keyword.control, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template#5FAD8E
entity.name.tag, meta.tag.sgml#7CB87A
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#C4A35A
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit#D4A85Aitalic
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading#A8C890
entity.name, support.type, support.class, support.other.namespace.php#5FAD8Ebold
support.type#5FAD8E
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name#A8C890
entity.other.attribute-name#C4A35A
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#D4A85Aitalic
string.regexp#5FAD8E
constant.character.escape#7CB87A
*url*, *link*, *uri*underline
source.json meta.structure.dictionary.json support.type.property-name.json#7CB87A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5FAD8E
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#C4A35A
markup.heading, markup.heading entity.name#7CB87Abold
markup.italic#A8C890italic
markup.bold, markup.bold string#C4A35Abold
markup.underline#5FAD8Eunderline
markup.table#D4E6C3