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