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#0A0702
  • activityBar.foreground#F5C842
  • activityBar.inactiveForeground#3A2A10
  • activityBarBadge.background#F5C842
  • activityBarBadge.foreground#120D05
  • badge.background#5A3A10
  • badge.foreground#F5C842
  • button.background#5A3A10
  • button.foreground#F5E8C0
  • button.hoverBackground#D4A017
  • dropdown.background#181005
  • dropdown.border#252010
  • dropdown.foreground#F5E8C0
  • editor.background#120D05
  • editor.foreground#F5E8C0
  • editor.inactiveSelectionBackground#F5C8421A
  • editor.lineHighlightBackground#1A1208
  • editor.selectionBackground#F5C84233
  • editorCursor.foreground#F5C842
  • editorError.foreground#FF4444
  • editorGroupHeader.tabsBackground#0E0A03
  • editorInfo.foreground#F5C842
  • editorLineNumber.activeForeground#D4A017
  • editorLineNumber.foreground#3A2A10
  • editorWarning.foreground#E8783A
  • editorWhitespace.foreground#1E1508
  • focusBorder#F5C842
  • input.background#181005
  • input.border#252010
  • input.foreground#F5E8C0
  • input.placeholderForeground#3A2A10
  • list.activeSelectionBackground#252010
  • list.activeSelectionForeground#F5C842
  • list.hoverBackground#1A1208
  • list.hoverForeground#F5E8C0
  • list.inactiveSelectionBackground#181005
  • notifications.background#181005
  • notifications.border#252010
  • notifications.foreground#F5E8C0
  • panel.background#0E0A03
  • panel.border#252010
  • panelTitle.activeBorder#F5C842
  • panelTitle.activeForeground#F5C842
  • panelTitle.inactiveForeground#6B4A20
  • progressBar.background#F5C842
  • scrollbarSlider.activeBackground#F5C84255
  • scrollbarSlider.background#25201077
  • scrollbarSlider.hoverBackground#F5C84233
  • sideBar.background#0E0A03
  • sideBar.foreground#D4C090
  • sideBarSectionHeader.background#181005
  • sideBarSectionHeader.foreground#D4A017
  • sideBarTitle.foreground#F5C842
  • statusBar.background#181005
  • statusBar.foreground#F5C842
  • statusBarItem.hoverBackground#252010
  • tab.activeBackground#120D05
  • tab.activeBorderTop#F5C842
  • tab.activeForeground#F5C842
  • tab.border#1A1208
  • tab.inactiveBackground#0E0A03
  • tab.inactiveForeground#6B4A20
  • terminal.ansiBlue#A07840
  • terminal.ansiBrightGreen#A8C870
  • terminal.ansiBrightYellow#F5DEB3
  • terminal.ansiCyan#6A8A3A
  • terminal.ansiGreen#8AAA5A
  • terminal.ansiMagenta#E8783A
  • terminal.ansiRed#FF4444
  • terminal.ansiYellow#F5C842
  • terminal.background#120D05
  • terminal.foreground#F5E8C0
  • titleBar.activeBackground#0A0702
  • titleBar.activeForeground#F5E8C0
  • titleBar.inactiveBackground#0A0702

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3A2A10italic
variable, string constant.other.placeholder#F5E8C0
invalid, invalid.illegal#FF4444
markup.deleted, invalid.broken#FF4444
keyword, storage.type, storage.modifier#F5C842bold
keyword.control, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template#8B6A30
entity.name.tag, meta.tag.sgml#F5C842
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#E8783A
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#E8A030italic
variable.parameter#C4A870italic
string, constant.other.symbol, constant.other.key#D4A017
entity.other.inherited-class, markup.heading#8AAA5A
entity.name, support.type, support.class, support.other.namespace.php#8AAA5Abold
support.type#6A8A3A
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name#C4A870
entity.other.attribute-name#E8A030
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#E8A030italic
variable.language#F5C842italic
string.regexp#E8783A
constant.character.escape#F5C842
*url*, *link*, *uri*underline
markup.inserted#8AAA5A
markup.changed#E8A030
source.json meta.structure.dictionary.json support.type.property-name.json#F5C842
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8783A
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#D4A017
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#8AAA5A
markup.heading, markup.heading entity.name#F5C842bold
markup.italic#D4A017italic
markup.bold, markup.bold string#E8783Abold
markup.underline#8AAA5Aunderline
markup.table#F5E8C0