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#130a04
  • activityBar.foreground#fbbf24
  • activityBarBadge.background#ea580c
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#fbbf24
  • breadcrumb.background#170d06
  • breadcrumb.focusForeground#fb923c
  • breadcrumb.foreground#8a6247
  • editor.background#170d06
  • editor.foreground#fff1e6
  • editor.lineHighlightBackground#2a180d
  • editorGroup.emptyBackground#170d06
  • editorGroupHeader.tabsBackground#130a04
  • editorGroupHeader.tabsBorder#130a04
  • editorIndentGuide.activeBackground1#ffa95e
  • editorIndentGuide.activeBackground2#e08c45
  • editorIndentGuide.activeBackground3#bd7233
  • editorIndentGuide.activeBackground4#9a5b27
  • editorIndentGuide.activeBackground5#7c481e
  • editorIndentGuide.activeBackground6#5c3516
  • editorIndentGuide.background1#f08b39
  • editorIndentGuide.background2#c2712f
  • editorIndentGuide.background3#945624
  • editorIndentGuide.background4#72421c
  • editorIndentGuide.background5#573215
  • editorIndentGuide.background6#402510
  • sideBar.background#130a04
  • sideBarTitle.foreground#fb923c
  • statusBar.background#0f0803
  • statusBar.foreground#fff1e6
  • tab.activeBackground#170d06
  • tab.activeBorderTop#f97316
  • tab.activeForeground#fbbf24
  • tab.inactiveBackground#150b04
  • tab.inactiveForeground#8a6247
  • titleBar.activeBackground#130a04
  • titleBar.activeForeground#fb923c
  • titleBar.inactiveBackground#0f0803
  • titleBar.inactiveForeground#8a6247

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a6247italic
variable, string constant.other.placeholder#fff1e6
constant.other.color#fb923c
invalid, invalid.illegal#f97316
keyword, storage.type, storage.modifier#f97316
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#f59e0b
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#fdba74
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#fb923c
meta.block variable.other#fdba74
support.other.variable, string.other.link#fdba74
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#fbbf24
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#facc15
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#fcd34d
support.type#fff1e6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#fcd34d
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#fdba74
variable.language#fdba74italic
entity.name.method.js#fb923citalic
meta.class-method.js entity.name.function.js, variable.function.constructor#fb923c
entity.other.attribute-name#f97316
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fcd34ditalic
entity.other.attribute-name.class#fdba74
source.sass keyword.control#fb923c
markup.inserted#fb923c
markup.deleted#f59e0b
markup.changed#f97316
string.regexp#f59e0b
constant.character.escape#f59e0b
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#fb923citalic
source.js constant.other.object.key.js string.unquoted.label.js#fdba74italic
source.json meta.structure.dictionary.json support.type.property-name.json#f97316
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fb923c
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#fbbf24
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#f59e0b
text.html.markdown, punctuation.definition.list_item.markdown#fff1e6
text.html.markdown markup.inline.raw.markdown#f97316
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#fb923c
markup.italic#fdba74italic
markup.bold, markup.bold string#fdba74bold