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#fff4e4
  • activityBar.border#d8c5e066
  • activityBar.foreground#9f4a70
  • activityBar.inactiveForeground#746684
  • activityBarBadge.background#9f4a70
  • activityBarBadge.foreground#fff4e4
  • button.background#9f4a70
  • button.foreground#fff4e4
  • button.hoverBackground#b13d6e
  • editor.background#fffaf3
  • editor.foreground#3f344a
  • editor.inactiveSelectionBackground#e7b7c733
  • editor.lineHighlightBackground#fff1dc
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#e7b7c75c
  • editorCursor.foreground#9f4a70
  • editorGroupHeader.tabsBackground#fff7ec
  • editorGroupHeader.tabsBorder#d8c5e066
  • editorWidget.background#fff7ec
  • editorWidget.border#d8c5e099
  • input.background#fff6e8
  • input.border#d8c5e099
  • input.foreground#3f344a
  • input.placeholderForeground#74668488
  • inputOption.activeBorder#9f4a70
  • list.activeSelectionBackground#fff1dc
  • list.activeSelectionForeground#9f4a70
  • list.focusBackground#fff1dc
  • list.highlightForeground#b13d6e
  • list.hoverBackground#fff6e8
  • list.inactiveSelectionBackground#fff6e8
  • list.inactiveSelectionForeground#5f536d
  • panel.background#fff7ec
  • panel.border#d8c5e066
  • panelTitle.activeBorder#9f4a70
  • panelTitle.activeForeground#9f4a70
  • panelTitle.inactiveForeground#746684
  • scrollbarSlider.activeBackground#9f4a7060
  • scrollbarSlider.background#9f4a7024
  • scrollbarSlider.hoverBackground#9f4a7040
  • sideBar.background#fff7ec
  • sideBar.border#d8c5e066
  • sideBar.foreground#5f536d
  • sideBarSectionHeader.background#fff0dc
  • sideBarSectionHeader.border#d8c5e040
  • sideBarSectionHeader.foreground#3f344a
  • sideBarTitle.foreground#9f4a70
  • statusBar.background#fff4e4
  • statusBar.border#d8c5e066
  • statusBar.foreground#9f4a70
  • statusBar.noFolderBackground#fff4e4
  • tab.activeBackground#ffffff
  • tab.activeBorder#9f4a70
  • tab.activeForeground#9f4a70
  • tab.border#d8c5e040
  • tab.inactiveBackground#fff7ec
  • tab.inactiveForeground#746684
  • titleBar.activeBackground#fff4e4
  • titleBar.activeForeground#9f4a70
  • titleBar.border#d8c5e066
  • titleBar.inactiveBackground#fff4e4
  • titleBar.inactiveForeground#746684
  • widget.border#d8c5e099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#746684italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object, variable.other#3f344a
constant.other.color#6f4b86
invalid, invalid.illegal#c93662
keyword, storage.type, storage.modifier, keyword.control#7d5fb2
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#23748f
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#b13d6e
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#2f77b4
meta.block variable.other#a84f73
support.other.variable, string.other.link#a84f73
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#9b5b13
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#267c52
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#8a6a18
support.type#a84f73
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#8a6a18
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#b13d6e
variable.language#b13d6eitalic
entity.name.method.js#2f77b4italic
meta.class-method.js entity.name.function.js, variable.function.constructor#2f77b4
entity.other.attribute-name#7d5fb2
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#8a6a18italic
entity.other.attribute-name.class#8a6a18
source.sass keyword.control#2f77b4
markup.inserted#267c52
markup.deleted#c93662
markup.changed#7d5fb2
string.regexp#23748f
constant.character.escape#23748f
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#2f77b4italic
source.js constant.other.object.key.js string.unquoted.label.js#b13d6eitalic
source.json meta.structure.dictionary.json support.type.property-name.json#7d5fb2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8a6a18
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#9b5b13
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#b13d6e
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#a84f73
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#2f77b4
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#a84f73
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#7d5fb2
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#267c52
text.html.markdown, punctuation.definition.list_item.markdown#3f344a
text.html.markdown markup.inline.raw.markdown#7d5fb2
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#746684
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#b13d6ebold
markup.italic#a84f73italic
markup.bold, markup.bold string#a84f73bold
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#a84f73bold
markup.underline#9b5b13underline
markup.quote punctuation.definition.blockquote.markdown#746684
markup.quoteitalic
string.other.link.title.markdown#2f77b4
string.other.link.description.title.markdown#7d5fb2
constant.other.reference.link.markdown#8a6a18
markup.raw.block#7d5fb2
markup.raw.block.fenced.markdown#7d708355
punctuation.definition.fenced.markdown#7d708355
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#3f344a
variable.language.fenced.markdown#746684
meta.separator#746684bold
markup.table#3f344a
Ethereal Lemons by Ethereal-Lemons - VS Code Theme