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#040404
  • activityBar.border#26262680
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#6c6c6c
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#040404
  • button.background#ffffff
  • button.foreground#040404
  • button.hoverBackground#e0e0e0
  • chat.avatarBackground#ffffff
  • chat.avatarForeground#040404
  • chat.background#040404
  • chat.border#26262680
  • chat.replyBackground#040404
  • chat.requestBackground#0c0c0c
  • editor.background#080808
  • editor.foreground#eaeaea
  • editor.inactiveSelectionBackground#ffffff0a
  • editor.lineHighlightBackground#151515
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#ffffff1c
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#040404
  • editorGroupHeader.tabsBorder#26262680
  • editorWidget.background#080808
  • editorWidget.border#262626cc
  • input.background#0c0c0c
  • input.border#262626cc
  • input.foreground#eaeaea
  • input.placeholderForeground#6c6c6c80
  • inputOption.activeBorder#ffffff
  • interactive.activeCodeBorder#ffffff
  • interactive.background#080808
  • interactive.inactiveCodeBorder#26262680
  • list.activeSelectionBackground#1a1a1a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#1a1a1a
  • list.highlightForeground#ffffff
  • list.hoverBackground#0c0c0c88
  • list.inactiveSelectionBackground#0c0c0c88
  • list.inactiveSelectionForeground#a3a3a3
  • panel.background#040404
  • panel.border#26262680
  • panelTitle.activeBorder#ffffff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#6c6c6c
  • scrollbarSlider.activeBackground#ffffff35
  • scrollbarSlider.background#ffffff10
  • scrollbarSlider.hoverBackground#ffffff22
  • sideBar.background#040404
  • sideBar.border#26262680
  • sideBar.foreground#a3a3a3
  • sideBarSectionHeader.background#0c0c0c
  • sideBarSectionHeader.border#26262640
  • sideBarSectionHeader.foreground#eaeaea
  • sideBarTitle.foreground#ffffff
  • statusBar.background#040404
  • statusBar.border#26262680
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#040404
  • tab.activeBackground#080808
  • tab.activeBorder#ffffff
  • tab.activeForeground#ffffff
  • tab.border#26262640
  • tab.inactiveBackground#040404
  • tab.inactiveForeground#6c6c6c
  • terminal.ansiCyan#ffffff
  • terminal.background#040404
  • terminal.border#26262680
  • terminal.foreground#eaeaea
  • titleBar.activeBackground#040404
  • titleBar.activeForeground#ffffff
  • titleBar.border#26262680
  • titleBar.inactiveBackground#040404
  • titleBar.inactiveForeground#6c6c6c
  • widget.border#262626cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6c6c6citalic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object, variable.other, variable.other.member#eaeaea
constant.other.color#ffffff
invalid, invalid.illegal#ff6b6b
keyword, storage.type, storage.modifier, keyword.control#ffffff
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#9a9a9a
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ffffff
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#b0b0b0
meta.block variable.other#eaeaea
support.other.variable, string.other.link#ffffff
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffffff
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#eaeaea
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#b0b0b0
support.type#b0b0b0
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#b0b0b0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ffffff
variable.language#ffffffitalic
entity.name.method.js#ffffffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#ffffff
entity.other.attribute-name#ffffff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#b0b0b0italic
entity.other.attribute-name.class#b0b0b0
source.sass keyword.control#ffffff
markup.inserted#ffffff
markup.deleted#ff6b6b
markup.changed#9a9a9a
string.regexp#ffffff
constant.character.escape#ffffff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ffffffitalic
source.js constant.other.object.key.js string.unquoted.label.js#ffffffitalic
source.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 support.type.property-name.json#b0b0b0
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#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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eaeaea
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#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 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
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#b0b0b0
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#eaeaea
text.html.markdown markup.inline.raw.markdown#ffffff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6c6c6c
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffffffbold
markup.italic#ffffffitalic
markup.bold, markup.bold string#ffffffbold
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#ffffffbold
markup.underline#ffffffunderline
markup.quote punctuation.definition.blockquote.markdown#6c6c6c
markup.quoteitalic
string.other.link.title.markdown#ffffff
string.other.link.description.title.markdown#ffffff
constant.other.reference.link.markdown#ffffff
markup.raw.block#ffffff
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#eaeaea
variable.language.fenced.markdown#6c6c6c
meta.separator#6c6c6cbold
markup.table#eaeaea