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#0e0b1c
  • activityBar.border#42326b40
  • activityBar.foreground#ffabcc
  • activityBar.inactiveForeground#7d729c
  • activityBarBadge.background#ffabcc
  • activityBarBadge.foreground#0e0b1c
  • button.background#ffabcc
  • button.foreground#0e0b1c
  • button.hoverBackground#ffccd9
  • chat.avatarBackground#ffabcc
  • chat.avatarForeground#0e0b1c
  • chat.background#0e0b1c
  • chat.border#42326b40
  • chat.replyBackground#0e0b1c
  • chat.requestBackground#1a1532
  • editor.background#141026
  • editor.foreground#f4effc
  • editor.inactiveSelectionBackground#ffabcc12
  • editor.lineHighlightBackground#231d3f
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#ffabcc2d
  • editorCursor.foreground#ffabcc
  • editorGroupHeader.tabsBackground#0e0b1c
  • editorGroupHeader.tabsBorder#42326b40
  • editorWidget.background#141026
  • editorWidget.border#42326ba0
  • input.background#1a1532
  • input.border#42326ba0
  • input.foreground#f4effc
  • input.placeholderForeground#7d729c80
  • inputOption.activeBorder#ffabcc
  • interactive.activeCodeBorder#ffabcc
  • interactive.background#141026
  • interactive.inactiveCodeBorder#42326b40
  • list.activeSelectionBackground#231d3f
  • list.activeSelectionForeground#ffabcc
  • list.focusBackground#231d3f
  • list.highlightForeground#ffccd9
  • list.hoverBackground#1a153288
  • list.inactiveSelectionBackground#1a153288
  • list.inactiveSelectionForeground#a89dbf
  • panel.background#0e0b1c
  • panel.border#42326b40
  • panelTitle.activeBorder#ffabcc
  • panelTitle.activeForeground#ffabcc
  • panelTitle.inactiveForeground#7d729c
  • scrollbarSlider.activeBackground#ffabcc35
  • scrollbarSlider.background#ffabcc10
  • scrollbarSlider.hoverBackground#ffabcc22
  • sideBar.background#0e0b1c
  • sideBar.border#42326b40
  • sideBar.foreground#a89dbf
  • sideBarSectionHeader.background#1a1532
  • sideBarSectionHeader.border#42326b15
  • sideBarSectionHeader.foreground#f4effc
  • sideBarTitle.foreground#ffabcc
  • statusBar.background#0e0b1c
  • statusBar.border#42326b40
  • statusBar.foreground#ffabcc
  • statusBar.noFolderBackground#0e0b1c
  • tab.activeBackground#141026
  • tab.activeBorder#ffabcc
  • tab.activeForeground#ffabcc
  • tab.border#42326b15
  • tab.inactiveBackground#0e0b1c
  • tab.inactiveForeground#7d729c
  • terminal.ansiCyan#ffabcc
  • terminal.background#0e0b1c
  • terminal.border#42326b40
  • terminal.foreground#f4effc
  • titleBar.activeBackground#0e0b1c
  • titleBar.activeForeground#ffabcc
  • titleBar.border#42326b40
  • titleBar.inactiveBackground#0e0b1c
  • titleBar.inactiveForeground#7d729c
  • widget.border#42326ba0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7d729citalic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object, variable.other, variable.other.member#f4effc
constant.other.color#ffffff
invalid, invalid.illegal#ff7096
keyword, storage.type, storage.modifier, keyword.control#ffcbba
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#ffabcc
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ffabcc
meta.block variable.other#f4effc
support.other.variable, string.other.link#ffcbba
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#baffec
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#ffabcc
variable.language#ffabccitalic
entity.name.method.js#ffabccitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#ffabcc
entity.other.attribute-name#ffcbba
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#ffabcc
markup.inserted#baffec
markup.deleted#ff7096
markup.changed#ffcbba
string.regexp#ffabcc
constant.character.escape#ffabcc
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ffabccitalic
source.js constant.other.object.key.js string.unquoted.label.js#ffabccitalic
source.json meta.structure.dictionary.json support.type.property-name.json#ffabcc
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#baffec
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#f4effc
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#ffabcc
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#ffabcc
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#baffec
text.html.markdown, punctuation.definition.list_item.markdown#f4effc
text.html.markdown markup.inline.raw.markdown#ff7096
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7d729c
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffabccbold
markup.italic#ffcbbaitalic
markup.bold, markup.bold string#ffcbbabold
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#ffcbbabold
markup.underline#ffabccunderline
markup.quote punctuation.definition.blockquote.markdown#7d729c
markup.quoteitalic
string.other.link.title.markdown#ffabcc
string.other.link.description.title.markdown#ffcbba
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#f4effc
variable.language.fenced.markdown#7d729c
meta.separator#7d729cbold
markup.table#f4effc
Ethereal Themes by Ethereal-Lemons - VS Code Theme