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#EDD5FF
  • activityBar.foreground#9B0060
  • activityBar.inactiveForeground#C9A0DC
  • activityBarBadge.background#9B0060
  • activityBarBadge.foreground#ffffff
  • badge.background#9B0060
  • badge.foreground#ffffff
  • button.background#9B0060
  • button.foreground#ffffff
  • button.hoverBackground#7B0099
  • dropdown.background#F7E5FF
  • dropdown.border#D9B0F0
  • dropdown.foreground#3B0051
  • editor.background#FDF0FF
  • editor.foreground#3B0051
  • editor.inactiveSelectionBackground#9B006022
  • editor.lineHighlightBackground#F5DAFF
  • editor.selectionBackground#9B006044
  • editorCursor.foreground#9B0060
  • editorGroupHeader.tabsBackground#F7E5FF
  • editorLineNumber.activeForeground#7B0099
  • editorLineNumber.foreground#C9A0DC
  • editorWhitespace.foreground#E8C8F5
  • focusBorder#9B0060
  • input.background#F7E5FF
  • input.border#D9B0F0
  • input.foreground#3B0051
  • input.placeholderForeground#C9A0DC
  • list.activeSelectionBackground#EDD5FF
  • list.activeSelectionForeground#9B0060
  • list.hoverBackground#F5DAFF
  • list.hoverForeground#3B0051
  • list.inactiveSelectionBackground#F0DAFF
  • notifications.background#F7E5FF
  • notifications.border#D9B0F0
  • notifications.foreground#3B0051
  • panel.background#F7E5FF
  • panel.border#D9B0F0
  • panelTitle.activeBorder#9B0060
  • panelTitle.activeForeground#9B0060
  • panelTitle.inactiveForeground#B070CC
  • progressBar.background#9B0060
  • scrollbarSlider.activeBackground#9B006055
  • scrollbarSlider.background#D9B0F077
  • scrollbarSlider.hoverBackground#9B006033
  • sideBar.background#F7E5FF
  • sideBar.foreground#3B0051
  • sideBarSectionHeader.background#EDD5FF
  • sideBarSectionHeader.foreground#7B0099
  • sideBarTitle.foreground#9B0060
  • statusBar.background#EDD5FF
  • statusBar.foreground#9B0060
  • statusBarItem.hoverBackground#D9B0F0
  • tab.activeBackground#FDF0FF
  • tab.activeBorderTop#9B0060
  • tab.activeForeground#9B0060
  • tab.border#E0C0F5
  • tab.inactiveBackground#F0DAFF
  • tab.inactiveForeground#B070CC
  • terminal.ansiBlue#7B0099
  • terminal.ansiCyan#6A0080
  • terminal.ansiMagenta#9B0060
  • terminal.ansiRed#CC0044
  • terminal.background#FDF0FF
  • terminal.foreground#3B0051
  • titleBar.activeBackground#EDD5FF
  • titleBar.activeForeground#3B0051
  • titleBar.inactiveBackground#EDD5FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#C9A0DCitalic
variable, string constant.other.placeholder#3B0051—
constant.other.color#9B0060—
invalid, invalid.illegal#CC0044—
keyword, storage.type, storage.modifier#9B0060bold
keyword.control, 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#7B0099—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#9B0060—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7B0099—
meta.block variable.other#3B0051—
support.other.variable, string.other.link#6A0080—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#9B0060italic
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#6A0080—
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#7B0099bold
support.type#6A0080—
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#6A0080—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#9B0060—
variable.language#9B0060italic
entity.name.method.js#7B0099italic
meta.class-method.js entity.name.function.js, variable.function.constructor#7B0099—
entity.other.attribute-name#9B0060—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#7B0099italic
entity.other.attribute-name.class#9B0060—
source.sass keyword.control#7B0099—
markup.inserted#6A0080—
markup.deleted#CC0044—
markup.changed#7B0099—
string.regexp#9B0060—
constant.character.escape#7B0099—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7B0099italic
source.js constant.other.object.key.js string.unquoted.label.js#9B0060italic
source.json meta.structure.dictionary.json support.type.property-name.json#9B0060—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7B0099—
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#6A0080—
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#9B0060—
text.html.markdown, punctuation.definition.list_item.markdown#3B0051—
text.html.markdown markup.inline.raw.markdown#7B0099—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#9B0060bold
markup.italic#7B0099italic
markup.bold, markup.bold string#9B0060bold
markup.underline#6A0080underline
markup.table#3B0051—