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#06080d
  • activityBar.border#2c354540
  • activityBar.foreground#a5d6ff
  • activityBar.inactiveForeground#6a768c
  • activityBarBadge.background#a5d6ff
  • activityBarBadge.foreground#06080d
  • button.background#a5d6ff
  • button.foreground#06080d
  • button.hoverBackground#cbe5ff
  • chat.avatarBackground#a5d6ff
  • chat.avatarForeground#06080d
  • chat.background#06080d
  • chat.border#2c354540
  • chat.replyBackground#06080d
  • chat.requestBackground#0e121b
  • editor.background#0a0d14
  • editor.foreground#e6ebf5
  • editor.inactiveSelectionBackground#a5d6ff12
  • editor.lineHighlightBackground#131824
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#a5d6ff2d
  • editorCursor.foreground#a5d6ff
  • editorGroupHeader.tabsBackground#06080d
  • editorGroupHeader.tabsBorder#2c354540
  • editorWidget.background#0a0d14
  • editorWidget.border#2c3545a0
  • input.background#0e121b
  • input.border#2c3545a0
  • input.foreground#e6ebf5
  • input.placeholderForeground#6a768c80
  • inputOption.activeBorder#a5d6ff
  • interactive.activeCodeBorder#a5d6ff
  • interactive.background#0a0d14
  • interactive.inactiveCodeBorder#2c354540
  • list.activeSelectionBackground#131824
  • list.activeSelectionForeground#a5d6ff
  • list.focusBackground#131824
  • list.highlightForeground#cbe5ff
  • list.hoverBackground#0e121b88
  • list.inactiveSelectionBackground#0e121b88
  • list.inactiveSelectionForeground#93a0b5
  • panel.background#06080d
  • panel.border#2c354540
  • panelTitle.activeBorder#a5d6ff
  • panelTitle.activeForeground#a5d6ff
  • panelTitle.inactiveForeground#6a768c
  • scrollbarSlider.activeBackground#a5d6ff35
  • scrollbarSlider.background#a5d6ff10
  • scrollbarSlider.hoverBackground#a5d6ff22
  • sideBar.background#06080d
  • sideBar.border#2c354540
  • sideBar.foreground#93a0b5
  • sideBarSectionHeader.background#0e121b
  • sideBarSectionHeader.border#2c354515
  • sideBarSectionHeader.foreground#e6ebf5
  • sideBarTitle.foreground#a5d6ff
  • statusBar.background#06080d
  • statusBar.border#2c354540
  • statusBar.foreground#a5d6ff
  • statusBar.noFolderBackground#06080d
  • tab.activeBackground#0a0d14
  • tab.activeBorder#a5d6ff
  • tab.activeForeground#a5d6ff
  • tab.border#2c354515
  • tab.inactiveBackground#06080d
  • tab.inactiveForeground#6a768c
  • terminal.ansiCyan#a5d6ff
  • terminal.background#06080d
  • terminal.border#2c354540
  • terminal.foreground#e6ebf5
  • titleBar.activeBackground#06080d
  • titleBar.activeForeground#a5d6ff
  • titleBar.border#2c354540
  • titleBar.inactiveBackground#06080d
  • titleBar.inactiveForeground#6a768c
  • widget.border#2c3545a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a768citalic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object, variable.other, variable.other.member#e6ebf5—
constant.other.color#ffffff—
invalid, invalid.illegal#ff7096—
keyword, storage.type, storage.modifier, keyword.control#d2ccff—
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#89ddff—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#a5d6ff—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#a5d6ff—
meta.block variable.other#e6ebf5—
support.other.variable, string.other.link#d2ccff—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff7096—
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#a5f3ff—
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#89ddff—
support.type#89ddff—
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#89ddff—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#a5d6ff—
variable.language#a5d6ffitalic
entity.name.method.js#a5d6ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#a5d6ff—
entity.other.attribute-name#d2ccff—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#89ddffitalic
entity.other.attribute-name.class#89ddff—
source.sass keyword.control#a5d6ff—
markup.inserted#a5f3ff—
markup.deleted#ff7096—
markup.changed#d2ccff—
string.regexp#a5d6ff—
constant.character.escape#a5d6ff—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#a5d6ffitalic
source.js constant.other.object.key.js string.unquoted.label.js#a5d6ffitalic
source.json meta.structure.dictionary.json support.type.property-name.json#a5d6ff—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#89ddff—
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#a5f3ff—
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#ff7096—
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#e6ebf5—
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#a5d6ff—
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#a5d6ff—
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#89ddff—
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#a5f3ff—
text.html.markdown, punctuation.definition.list_item.markdown#e6ebf5—
text.html.markdown markup.inline.raw.markdown#ff7096—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6a768c—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#a5d6ffbold
markup.italic#d2ccffitalic
markup.bold, markup.bold string#d2ccffbold
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#d2ccffbold
markup.underline#a5d6ffunderline
markup.quote punctuation.definition.blockquote.markdown#6a768c—
markup.quote—italic
string.other.link.title.markdown#a5d6ff—
string.other.link.description.title.markdown#d2ccff—
constant.other.reference.link.markdown#ff7096—
markup.raw.block#ff7096—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e6ebf5—
variable.language.fenced.markdown#6a768c—
meta.separator#6a768cbold
markup.table#e6ebf5—