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#04080d
  • activityBar.border#4b607a40
  • activityBar.foreground#59b2ff
  • activityBar.inactiveForeground#4f657a
  • activityBarBadge.background#59b2ff
  • activityBarBadge.foreground#04080d
  • button.background#59b2ff
  • button.foreground#04080d
  • button.hoverBackground#ffd166
  • editor.background#0a111a
  • editor.foreground#d1dfeb
  • editor.inactiveSelectionBackground#59b2ff15
  • editor.lineHighlightBackground#0f1a28
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#59b2ff2d
  • editorCursor.foreground#59b2ff
  • editorGroupHeader.tabsBackground#070c14
  • editorGroupHeader.tabsBorder#4b607a40
  • editorWidget.background#0a111a
  • editorWidget.border#4b607ad0
  • input.background#0d1724
  • input.border#4b607ad0
  • input.foreground#d1dfeb
  • input.placeholderForeground#4f657a80
  • inputOption.activeBorder#59b2ff
  • list.activeSelectionBackground#0f1a28
  • list.activeSelectionForeground#59b2ff
  • list.focusBackground#0f1a28
  • list.highlightForeground#ffd166
  • list.hoverBackground#0d1724
  • list.inactiveSelectionBackground#070c14
  • list.inactiveSelectionForeground#8fa8bc
  • panel.background#070c14
  • panel.border#4b607a40
  • panelTitle.activeBorder#59b2ff
  • panelTitle.activeForeground#59b2ff
  • panelTitle.inactiveForeground#4f657a
  • scrollbarSlider.activeBackground#59b2ff35
  • scrollbarSlider.background#59b2ff10
  • scrollbarSlider.hoverBackground#59b2ff22
  • sideBar.background#070c14
  • sideBar.border#4b607a40
  • sideBar.foreground#8fa8bc
  • sideBarSectionHeader.background#0a111a
  • sideBarSectionHeader.border#4b607a20
  • sideBarSectionHeader.foreground#d1dfeb
  • sideBarTitle.foreground#59b2ff
  • statusBar.background#04080d
  • statusBar.border#4b607a40
  • statusBar.foreground#59b2ff
  • statusBar.noFolderBackground#04080d
  • tab.activeBackground#0d1724
  • tab.activeBorder#59b2ff
  • tab.activeForeground#59b2ff
  • tab.border#4b607a20
  • tab.inactiveBackground#070c14
  • tab.inactiveForeground#4f657a
  • titleBar.activeBackground#04080d
  • titleBar.activeForeground#59b2ff
  • titleBar.border#4b607a40
  • titleBar.inactiveBackground#04080d
  • titleBar.inactiveForeground#4f657a
  • widget.border#4b607ad0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b849citalic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object, variable.other, variable.other.member#d1dfeb—
constant.other.color#ffffff—
invalid, invalid.illegal#ff7878—
keyword, storage.type, storage.modifier, keyword.control#59b2ff—
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#ffffff—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#59b2ff—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ffd166—
meta.block variable.other#d1dfeb—
support.other.variable, string.other.link#59b2ff—
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#6ce89f—
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#ffffff—
support.type#ffffff—
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#ffffff—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#59b2ff—
variable.language#59b2ffitalic
entity.name.method.js#ffd166italic
meta.class-method.js entity.name.function.js, variable.function.constructor#ffd166—
entity.other.attribute-name#59b2ff—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffffffitalic
entity.other.attribute-name.class#ffffff—
source.sass keyword.control#ffd166—
markup.inserted#6ce89f—
markup.deleted#ff7878—
markup.changed#59b2ff—
string.regexp#ffd166—
constant.character.escape#ffd166—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ffd166italic
source.js constant.other.object.key.js string.unquoted.label.js#59b2ffitalic
source.json meta.structure.dictionary.json support.type.property-name.json#59b2ff—
source.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 support.type.property-name.json#6ce89f—
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#ffd166—
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#d1dfeb—
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#ffd166—
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#59b2ff—
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#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 support.type.property-name.json#6ce89f—
text.html.markdown, punctuation.definition.list_item.markdown#d1dfeb—
text.html.markdown markup.inline.raw.markdown#59b2ff—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6b849c—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#59b2ffbold
markup.italic#59b2ffitalic
markup.bold, markup.bold string#59b2ffbold
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#59b2ffbold
markup.underline#ffd166underline
markup.quote punctuation.definition.blockquote.markdown#6b849c—
markup.quote—italic
string.other.link.title.markdown#ffd166—
string.other.link.description.title.markdown#59b2ff—
constant.other.reference.link.markdown#6ce89f—
markup.raw.block#59b2ff—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d1dfeb—
variable.language.fenced.markdown#6b849c—
meta.separator#6b849cbold
markup.table#d1dfeb—