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#f7f2ea
  • activityBar.border#ede4d4
  • activityBar.foreground#b45309
  • activityBar.inactiveForeground#a8a29e
  • activityBarBadge.background#d97706
  • activityBarBadge.foreground#ffffff
  • badge.background#d97706
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d97706
  • breadcrumb.focusForeground#292524
  • breadcrumb.foreground#78716c
  • button.background#d97706
  • button.foreground#ffffff
  • button.hoverBackground#b45309
  • dropdown.background#ffffff
  • dropdown.border#e7dbcb
  • dropdown.foreground#292524
  • editor.background#fffdfa
  • editor.findMatchBackground#fde68a90
  • editor.findMatchHighlightBackground#fef08a60
  • editor.foreground#292524
  • editor.inactiveSelectionBackground#f5ede070
  • editor.selectionBackground#fef08a70
  • editor.selectionHighlightBackground#fef08a40
  • editor.wordHighlightBackground#fed7aa60
  • editorCursor.foreground#d97706
  • editorGroupHeader.border#ede4d4
  • editorGroupHeader.tabsBackground#f5efe6
  • editorLineNumber.activeForeground#d97706
  • editorLineNumber.foreground#a8a29e
  • focusBorder#d97706
  • foreground#292524
  • gitDecoration.deletedResourceForeground#b91c1c
  • gitDecoration.modifiedResourceForeground#d97706
  • gitDecoration.untrackedResourceForeground#15803d
  • input.background#ffffff
  • input.border#e7dbcb
  • input.foreground#292524
  • input.placeholderForeground#a8a29e
  • list.activeSelectionBackground#fef3c7
  • list.activeSelectionForeground#92400e
  • list.hoverBackground#f5ecde
  • list.inactiveSelectionBackground#f5ecde
  • sideBar.background#faf6ef
  • sideBar.border#ede4d4
  • sideBar.foreground#57534e
  • sideBarSectionHeader.background#f2ebe0
  • sideBarSectionHeader.foreground#292524
  • sideBarTitle.foreground#292524
  • statusBar.background#b45309
  • statusBar.debuggingBackground#c2410c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#92400e
  • statusBarItem.hoverBackground#92400e
  • tab.activeBackground#fffdfa
  • tab.activeBorder#d97706
  • tab.activeForeground#292524
  • tab.border#ede4d4
  • tab.hoverBackground#faf6ef
  • tab.inactiveBackground#f5efe6
  • tab.inactiveForeground#78716c
  • terminal.ansiBlack#292524
  • terminal.ansiBlue#0369a1
  • terminal.ansiBrightBlack#78716c
  • terminal.ansiBrightBlue#0284c7
  • terminal.ansiBrightCyan#14b8a6
  • terminal.ansiBrightGreen#16a34a
  • terminal.ansiBrightMagenta#9333ea
  • terminal.ansiBrightRed#dc2626
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f59e0b
  • terminal.ansiCyan#0f766e
  • terminal.ansiGreen#15803d
  • terminal.ansiMagenta#7e22ce
  • terminal.ansiRed#b91c1c
  • terminal.ansiWhite#fdfbf7
  • terminal.ansiYellow#d97706
  • terminal.background#fffdfa
  • terminal.foreground#292524
  • terminalCursor.foreground#d97706
  • titleBar.activeBackground#faf6ef
  • titleBar.activeForeground#292524
  • titleBar.border#ede4d4
  • titleBar.inactiveBackground#fffdfa
  • titleBar.inactiveForeground#a8a29e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#78716citalic
variable, string constant.other.placeholder#9a3412
constant.other.color#292524
invalid, invalid.illegal#b91c1c
keyword, storage.type, storage.modifier#c2410c
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#b91c1c
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#b91c1c
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7c2d12
meta.block variable.other#292524
support.other.variable, string.other.link#b45309
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#d97706
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#15803d
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#7e22ce
support.type#0f766e
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#9333ea
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#7c2d12
variable.language#7c2d12italic
entity.name.method.js#7c2d12italic
meta.class-method.js entity.name.function.js, variable.function.constructor#7c2d12
entity.other.attribute-name#7e22ce
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#d97706italic
entity.other.attribute-name.class#9333ea
source.sass keyword.control#7c2d12
markup.inserted#15803d
markup.deleted#b91c1c
markup.changed#d97706
string.regexp#0f766e
constant.character.escape#0f766e
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7e22ceitalic
source.js constant.other.object.key.js string.unquoted.label.js#b91c1citalic
source.json meta.structure.dictionary.json support.type.property-name.json#9a3412
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c2410c
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#d97706
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#15803d
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6b21a8
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b45309
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 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#0f766e
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#854d0e
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#78350f
text.html.markdown, punctuation.definition.list_item.markdown#292524
text.html.markdown markup.inline.raw.markdown#7e22ce
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#78716c
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#7c2d12
markup.italic#b91c1citalic
markup.bold, markup.bold string#292524bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#b91c1cbold
markup.underline#d97706underline
markup.quote punctuation.definition.blockquote.markdown#78716c
markup.quoteitalic
string.other.link.title.markdown#b45309
string.other.link.description.title.markdown#7e22ce
constant.other.reference.link.markdown#d97706
markup.raw.block#7e22ce
markup.raw.block.fenced.markdown#29252415
punctuation.definition.fenced.markdown#29252415
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#292524
variable.language.fenced.markdown#78716c
meta.separator#78716cbold
markup.table#292524