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#090717
  • activityBar.foreground#f562bf
  • activityBarBadge.background#a855f7
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#f562bf
  • breadcrumb.background#0e0c22
  • breadcrumb.focusForeground#c084fc
  • breadcrumb.foreground#5b577d
  • editor.background#0e0c22
  • editor.foreground#e2daeb
  • editor.lineHighlightBackground#161333
  • editorGroup.emptyBackground#0e0c22
  • editorGroupHeader.tabsBackground#090717
  • editorGroupHeader.tabsBorder#090717
  • editorIndentGuide.activeBackground1#d6a4ff
  • editorIndentGuide.activeBackground2#ba8bee
  • editorIndentGuide.activeBackground3#9d70c9
  • editorIndentGuide.activeBackground4#7c55a1
  • editorIndentGuide.activeBackground5#5f4180
  • editorIndentGuide.activeBackground6#453060
  • editorIndentGuide.background1#b77ef1
  • editorIndentGuide.background2#9466c6
  • editorIndentGuide.background3#704e9a
  • editorIndentGuide.background4#553c79
  • editorIndentGuide.background5#402e5f
  • editorIndentGuide.background6#2e2249
  • sideBar.background#090717
  • sideBarTitle.foreground#c084fc
  • statusBar.background#060410
  • statusBar.foreground#e2daeb
  • tab.activeBackground#0e0c22
  • tab.activeBorderTop#d946ef
  • tab.activeForeground#f562bf
  • tab.inactiveBackground#080616
  • tab.inactiveForeground#5b577d
  • titleBar.activeBackground#090717
  • titleBar.activeForeground#c084fc
  • titleBar.inactiveBackground#060410
  • titleBar.inactiveForeground#5b577d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5b577ditalic
variable, string constant.other.placeholder#e2daeb
constant.other.color#f472b6
invalid, invalid.illegal#725cf0
keyword, storage.type, storage.modifier#d946ef
keyword.control, 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#a855f7
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff79c6
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#f472b6
meta.block variable.other#ff79c6
support.other.variable, string.other.link#ff79c6
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#e879f9
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#725cf0
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#c084fc
support.type#e2daeb
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#c084fc
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff79c6
variable.language#ff79c6italic
entity.name.method.js#f472b6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#f472b6
entity.other.attribute-name#d946ef
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#c084fcitalic
entity.other.attribute-name.class#ff79c6
source.sass keyword.control#f472b6
markup.inserted#f472b6
markup.deleted#725cf0
markup.changed#d946ef
string.regexp#a855f7
constant.character.escape#a855f7
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#f472b6italic
source.js constant.other.object.key.js string.unquoted.label.js#ff79c6italic
source.json meta.structure.dictionary.json support.type.property-name.json#d946ef
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c084fc
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#e879f9
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#ff79c6
text.html.markdown, punctuation.definition.list_item.markdown#e2daeb
text.html.markdown markup.inline.raw.markdown#d946ef
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#f472b6
markup.italic#ff79c6italic
markup.bold, markup.bold string#ff79c6bold
A little colorful themes by irenealcaine - VS Code Theme