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#EDD898
  • activityBar.foreground#6B4400
  • activityBar.inactiveForeground#C4A850
  • activityBarBadge.background#8B6000
  • activityBarBadge.foreground#FFFBF0
  • badge.background#8B6000
  • badge.foreground#FFFBF0
  • button.background#8B6000
  • button.foreground#FFFBF0
  • button.hoverBackground#C86400
  • dropdown.background#F5E8C0
  • dropdown.border#D4C070
  • dropdown.foreground#2A1A05
  • editor.background#FFFBF0
  • editor.foreground#2A1A05
  • editor.inactiveSelectionBackground#D4A0171A
  • editor.lineHighlightBackground#FFF3D0
  • editor.selectionBackground#D4A01733
  • editorCursor.foreground#D4A017
  • editorError.foreground#CC1111
  • editorGroupHeader.tabsBackground#F5E8C0
  • editorInfo.foreground#8B6000
  • editorLineNumber.activeForeground#8B6000
  • editorLineNumber.foreground#D4B870
  • editorWarning.foreground#C86400
  • editorWhitespace.foreground#F0E0B0
  • focusBorder#8B6000
  • input.background#F5E8C0
  • input.border#D4C070
  • input.foreground#2A1A05
  • input.placeholderForeground#C4A850
  • list.activeSelectionBackground#EDD898
  • list.activeSelectionForeground#6B4400
  • list.hoverBackground#FFF3D0
  • list.hoverForeground#2A1A05
  • list.inactiveSelectionBackground#F5E8C0
  • notifications.background#F5E8C0
  • notifications.border#D4C070
  • notifications.foreground#2A1A05
  • panel.background#F5E8C0
  • panel.border#D4C070
  • panelTitle.activeBorder#8B6000
  • panelTitle.activeForeground#8B6000
  • panelTitle.inactiveForeground#C4A850
  • progressBar.background#8B6000
  • scrollbarSlider.activeBackground#8B600055
  • scrollbarSlider.background#D4C07077
  • scrollbarSlider.hoverBackground#8B600033
  • sideBar.background#F5E8C0
  • sideBar.foreground#2A1A05
  • sideBarSectionHeader.background#EDD898
  • sideBarSectionHeader.foreground#6B4400
  • sideBarTitle.foreground#8B6000
  • statusBar.background#EDD898
  • statusBar.foreground#6B4400
  • statusBarItem.hoverBackground#D4C070
  • tab.activeBackground#FFFBF0
  • tab.activeBorderTop#8B6000
  • tab.activeForeground#8B6000
  • tab.border#EDD898
  • tab.inactiveBackground#F5E8C0
  • tab.inactiveForeground#C4A850
  • terminal.ansiBlue#6A5000
  • terminal.ansiCyan#5A6A1A
  • terminal.ansiGreen#4A6A1A
  • terminal.ansiMagenta#C86400
  • terminal.ansiRed#CC1111
  • terminal.ansiYellow#8B6000
  • terminal.background#FFFBF0
  • terminal.foreground#2A1A05
  • titleBar.activeBackground#EDD898
  • titleBar.activeForeground#2A1A05
  • titleBar.inactiveBackground#EDD898

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#C4A850italic
variable, string constant.other.placeholder#2A1A05
invalid, invalid.illegal#CC1111
markup.deleted, invalid.broken#CC1111
keyword, storage.type, storage.modifier#8B6000bold
keyword.control, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template#A07830
entity.name.tag, meta.tag.sgml#8B6000
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#C86400
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#C86400italic
variable.parameter#8B6830italic
string, constant.other.symbol, constant.other.key#6B4400
entity.other.inherited-class, markup.heading#4A6A1A
entity.name, support.type, support.class, support.other.namespace.php#4A6A1Abold
support.type#5A6A1A
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name#8B6830
entity.other.attribute-name#C86400
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#C86400italic
variable.language#8B6000italic
string.regexp#C86400
constant.character.escape#8B6000
*url*, *link*, *uri*underline
markup.inserted#4A6A1A
markup.changed#C86400
source.json meta.structure.dictionary.json support.type.property-name.json#8B6000
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C86400
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#6B4400
source.json meta.structure.dictionary.json meta.structure.dictionary.value.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#4A6A1A
markup.heading, markup.heading entity.name#8B6000bold
markup.italic#6B4400italic
markup.bold, markup.bold string#C86400bold
markup.underline#4A6A1Aunderline
markup.table#2A1A05