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#0f0d14
  • activityBar.border#2f284240
  • activityBar.foreground#ffb3d1
  • activityBar.inactiveForeground#6b6380
  • activityBarBadge.background#ffb3d1
  • activityBarBadge.foreground#0f0d14
  • button.background#ffb3d1
  • button.foreground#0f0d14
  • button.hoverBackground#ffa8cc
  • editor.background#161420
  • editor.foreground#eae6f5
  • editor.inactiveSelectionBackground#ffccd81a
  • editor.lineHighlightBackground#221f31
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#ffccd835
  • editorCursor.foreground#ffb3d1
  • editorGroupHeader.tabsBackground#121019
  • editorGroupHeader.tabsBorder#2f284240
  • editorWidget.background#121019
  • editorWidget.border#2f284280
  • input.background#1d1a29
  • input.border#2f284280
  • input.foreground#eae6f5
  • input.placeholderForeground#6b638080
  • inputOption.activeBorder#ffb3d1
  • list.activeSelectionBackground#221f31
  • list.activeSelectionForeground#ffb3d1
  • list.focusBackground#221f31
  • list.highlightForeground#ffa8cc
  • list.hoverBackground#1d1a29
  • list.inactiveSelectionBackground#1d1a29
  • list.inactiveSelectionForeground#cdc5e3
  • panel.background#121019
  • panel.border#2f284240
  • panelTitle.activeBorder#ffb3d1
  • panelTitle.activeForeground#ffb3d1
  • panelTitle.inactiveForeground#6b6380
  • scrollbarSlider.activeBackground#ffb3d140
  • scrollbarSlider.background#ffb3d115
  • scrollbarSlider.hoverBackground#ffb3d12a
  • sideBar.background#121019
  • sideBar.border#2f284240
  • sideBar.foreground#cdc5e3
  • sideBarSectionHeader.background#181624
  • sideBarSectionHeader.border#2f284220
  • sideBarSectionHeader.foreground#eae6f5
  • sideBarTitle.foreground#ffb3d1
  • statusBar.background#0f0d14
  • statusBar.border#2f284240
  • statusBar.foreground#ffb3d1
  • statusBar.noFolderBackground#0f0d14
  • tab.activeBackground#1c1927
  • tab.activeBorder#ffb3d1
  • tab.activeForeground#ffb3d1
  • tab.border#2f284220
  • tab.inactiveBackground#121019
  • tab.inactiveForeground#6b6380
  • titleBar.activeBackground#0f0d14
  • titleBar.activeForeground#ffb3d1
  • titleBar.border#2f284240
  • titleBar.inactiveBackground#0f0d14
  • titleBar.inactiveForeground#6b6380
  • widget.border#2f284280

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b6380italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object, variable.other#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#c2f0fc
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#a2d2ff
meta.block variable.other#ffccd8
support.other.variable, string.other.link#ffccd8
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffd6a5
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#c3ffd8
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#ffe5ad
support.type#ffccd8
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#ffe5ad
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ffa8cc
variable.language#ffa8ccitalic
entity.name.method.js#a2d2ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#a2d2ff
entity.other.attribute-name#dec9ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffe5aditalic
entity.other.attribute-name.class#ffe5ad
source.sass keyword.control#a2d2ff
markup.inserted#c3ffd8
markup.deleted#ff7096
markup.changed#dec9ff
string.regexp#c2f0fc
constant.character.escape#c2f0fc
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#a2d2ffitalic
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#ffe5ad
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#ffd6a5
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#ffccd8
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#a2d2ff
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#ffccd8
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#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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c3ffd8
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#6b6380
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffa8ccbold
markup.italic#ffccd8italic
markup.bold, markup.bold string#ffccd8bold
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#ffccd8bold
markup.underline#ffd6a5underline
markup.quote punctuation.definition.blockquote.markdown#6b6380
markup.quoteitalic
string.other.link.title.markdown#a2d2ff
string.other.link.description.title.markdown#dec9ff
constant.other.reference.link.markdown#ffe5ad
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#6b6380
meta.separator#6b6380bold
markup.table#eae6f5
Ethereal Lemons by Ethereal-Lemons - VS Code Theme