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.quoteitalic
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
Ethereal Lemons by Ethereal-Lemons - VS Code Theme