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#040508
  • activityBar.border#3a465935
  • activityBar.foreground#9cd2ff
  • activityBar.inactiveForeground#576275
  • activityBarBadge.background#9cd2ff
  • activityBarBadge.foreground#040508
  • button.background#9cd2ff
  • button.foreground#040508
  • button.hoverBackground#7ec2ff
  • editor.background#07080c
  • editor.foreground#eae6f5
  • editor.inactiveSelectionBackground#9cd2ff12
  • editor.lineHighlightBackground#101422
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#9cd2ff2d
  • editorCursor.foreground#9cd2ff
  • editorGroupHeader.tabsBackground#07080c
  • editorGroupHeader.tabsBorder#3a465935
  • editorWidget.background#0a0b0f
  • editorWidget.border#3a465960
  • input.background#0d1017
  • input.border#3a465960
  • input.foreground#eae6f5
  • input.placeholderForeground#57627580
  • inputOption.activeBorder#9cd2ff
  • list.activeSelectionBackground#101422
  • list.activeSelectionForeground#9cd2ff
  • list.focusBackground#101422
  • list.highlightForeground#7ec2ff
  • list.hoverBackground#0d1017
  • list.inactiveSelectionBackground#0a0b0f
  • list.inactiveSelectionForeground#a3b0c2
  • panel.background#07080c
  • panel.border#3a465935
  • panelTitle.activeBorder#9cd2ff
  • panelTitle.activeForeground#9cd2ff
  • panelTitle.inactiveForeground#576275
  • scrollbarSlider.activeBackground#9cd2ff35
  • scrollbarSlider.background#9cd2ff10
  • scrollbarSlider.hoverBackground#9cd2ff22
  • sideBar.background#07080c
  • sideBar.border#3a465935
  • sideBar.foreground#a3b0c2
  • sideBarSectionHeader.background#0a0b0f
  • sideBarSectionHeader.border#3a46591a
  • sideBarSectionHeader.foreground#eae6f5
  • sideBarTitle.foreground#9cd2ff
  • statusBar.background#040508
  • statusBar.border#3a465935
  • statusBar.foreground#9cd2ff
  • statusBar.noFolderBackground#040508
  • tab.activeBackground#0d1017
  • tab.activeBorder#9cd2ff
  • tab.activeForeground#9cd2ff
  • tab.border#3a46591a
  • tab.inactiveBackground#07080c
  • tab.inactiveForeground#576275
  • titleBar.activeBackground#040508
  • titleBar.activeForeground#9cd2ff
  • titleBar.border#3a465935
  • titleBar.inactiveBackground#040508
  • titleBar.inactiveForeground#576275
  • widget.border#3a465960

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#857aa7italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object, variable.other, variable.other.member#eae6f5
constant.other.color#ffffff
invalid, invalid.illegal#ff7096
keyword, storage.type, storage.modifier, keyword.control#dec9ff
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#f1f5f9
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ffa8cc
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#89ddff
meta.block variable.other#eae6f5
support.other.variable, string.other.link#82aaff
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffa8cc
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#a7f3d0
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#82aaff
support.type#82aaff
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#82aaff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ffa8cc
variable.language#ffa8ccitalic
entity.name.method.js#89ddffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#89ddff
entity.other.attribute-name#dec9ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#82aaffitalic
entity.other.attribute-name.class#82aaff
source.sass keyword.control#89ddff
markup.inserted#a7f3d0
markup.deleted#ff7096
markup.changed#dec9ff
string.regexp#89ddff
constant.character.escape#89ddff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#89ddffitalic
source.js constant.other.object.key.js string.unquoted.label.js#ffa8ccitalic
source.json meta.structure.dictionary.json support.type.property-name.json#dec9ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82aaff
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#a7f3d0
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#ffa8cc
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#eae6f5
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#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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#dec9ff
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#82aaff
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#a7f3d0
text.html.markdown, punctuation.definition.list_item.markdown#eae6f5
text.html.markdown markup.inline.raw.markdown#dec9ff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#857aa7
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffa8ccbold
markup.italic#dec9ffitalic
markup.bold, markup.bold string#dec9ffbold
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#dec9ffbold
markup.underline#ffa8ccunderline
markup.quote punctuation.definition.blockquote.markdown#857aa7
markup.quoteitalic
string.other.link.title.markdown#82aaff
string.other.link.description.title.markdown#dec9ff
constant.other.reference.link.markdown#ffa8cc
markup.raw.block#dec9ff
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#eae6f5
variable.language.fenced.markdown#857aa7
meta.separator#857aa7bold
markup.table#eae6f5