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#090506
  • activityBar.border#53232c35
  • activityBar.foreground#ff3b70
  • activityBar.inactiveForeground#664e56
  • activityBarBadge.background#ff3b70
  • activityBarBadge.foreground#090506
  • button.background#ff3b70
  • button.foreground#090506
  • button.hoverBackground#ff5c86
  • chat.avatarBackground#ff3b70
  • chat.avatarForeground#090506
  • chat.background#090506
  • chat.border#53232c35
  • chat.replyBackground#090506
  • chat.requestBackground#160e11
  • editor.background#0f090b
  • editor.foreground#eae3e7
  • editor.inactiveSelectionBackground#ff3b7012
  • editor.lineHighlightBackground#211418
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#ff3b702d
  • editorCursor.foreground#ff3b70
  • editorGroupHeader.tabsBackground#090506
  • editorGroupHeader.tabsBorder#53232c35
  • editorWidget.background#0f090b
  • editorWidget.border#53232ca0
  • input.background#160e11
  • input.border#53232ca0
  • input.foreground#eae3e7
  • input.placeholderForeground#664e5680
  • inputOption.activeBorder#ff3b70
  • interactive.activeCodeBorder#ff3b70
  • interactive.background#0f090b
  • interactive.inactiveCodeBorder#53232c35
  • list.activeSelectionBackground#281419
  • list.activeSelectionForeground#ff3b70
  • list.focusBackground#281419
  • list.highlightForeground#ff5c86
  • list.hoverBackground#160e1188
  • list.inactiveSelectionBackground#160e1188
  • list.inactiveSelectionForeground#a28e96
  • panel.background#090506
  • panel.border#53232c35
  • panelTitle.activeBorder#ff3b70
  • panelTitle.activeForeground#ff3b70
  • panelTitle.inactiveForeground#664e56
  • scrollbarSlider.activeBackground#ff3b7035
  • scrollbarSlider.background#ff3b7010
  • scrollbarSlider.hoverBackground#ff3b7022
  • sideBar.background#090506
  • sideBar.border#53232c35
  • sideBar.foreground#a28e96
  • sideBarSectionHeader.background#160e11
  • sideBarSectionHeader.border#53232c15
  • sideBarSectionHeader.foreground#eae3e7
  • sideBarTitle.foreground#ff3b70
  • statusBar.background#090506
  • statusBar.border#53232c35
  • statusBar.foreground#ff3b70
  • statusBar.noFolderBackground#090506
  • tab.activeBackground#0f090b
  • tab.activeBorder#ff3b70
  • tab.activeForeground#ff3b70
  • tab.border#53232c15
  • tab.inactiveBackground#090506
  • tab.inactiveForeground#664e56
  • terminal.ansiCyan#ff3b70
  • terminal.background#090506
  • terminal.border#53232c35
  • terminal.foreground#eae3e7
  • titleBar.activeBackground#090506
  • titleBar.activeForeground#ff3b70
  • titleBar.border#53232c35
  • titleBar.inactiveBackground#090506
  • titleBar.inactiveForeground#664e56
  • widget.border#53232ca0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#87707aitalic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object, variable.other, variable.other.member#eae3e7
constant.other.color#ffffff
invalid, invalid.illegal#ff3b70
keyword, storage.type, storage.modifier, keyword.control#ff3b70
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, keyword.operator#dec9d4
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff3b70
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#e8c4d0
meta.block variable.other#eae3e7
support.other.variable, string.other.link#ff7da0
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff7da0
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#ffffff
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, entity.name.type#e8c4d0
support.type#e8c4d0
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#e8c4d0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff3b70
variable.language#ff3b70italic
entity.name.method.js#ff3b70italic
meta.class-method.js entity.name.function.js, variable.function.constructor#ff3b70
entity.other.attribute-name#ff7da0
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#e8c4d0italic
entity.other.attribute-name.class#e8c4d0
source.sass keyword.control#ff3b70
markup.inserted#ffffff
markup.deleted#ff3b70
markup.changed#ff7da0
string.regexp#ff3b70
constant.character.escape#ff3b70
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ff3b70italic
source.js constant.other.object.key.js string.unquoted.label.js#ff3b70italic
source.json meta.structure.dictionary.json support.type.property-name.json#ff3b70
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e8c4d0
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#ffffff
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#ff7da0
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#eae3e7
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#ff3b70
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#ff3b70
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#e8c4d0
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#ffffff
text.html.markdown, punctuation.definition.list_item.markdown#eae3e7
text.html.markdown markup.inline.raw.markdown#ff7da0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#87707a
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ff3b70bold
markup.italic#ff7da0italic
markup.bold, markup.bold string#ff7da0bold
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#ff7da0bold
markup.underline#ff3b70underline
markup.quote punctuation.definition.blockquote.markdown#87707a
markup.quoteitalic
string.other.link.title.markdown#ff3b70
string.other.link.description.title.markdown#ff7da0
constant.other.reference.link.markdown#ff7da0
markup.raw.block#ff7da0
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#eae3e7
variable.language.fenced.markdown#87707a
meta.separator#87707abold
markup.table#eae3e7