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#000000
  • activityBar.border#0a001a
  • activityBar.foreground#c055ff
  • activityBarBadge.background#a535e5
  • editor.background#000000
  • editor.foreground#e0e0e0
  • editorBracketHighlight.foreground1#c42bff
  • editorBracketHighlight.foreground2#c844ff
  • editorBracketHighlight.foreground3#d666ff
  • editorBracketHighlight.foreground4#8800cc
  • editorBracketHighlight.foreground5#660099
  • editorBracketHighlight.foreground6#440066
  • editorBracketPairGuide.activeBackground1#c42bff
  • editorBracketPairGuide.activeBackground2#c844ff
  • editorBracketPairGuide.activeBackground3#d666ff
  • editorBracketPairGuide.activeBackground4#8800cc
  • editorBracketPairGuide.activeBackground5#660099
  • editorBracketPairGuide.activeBackground6#440066
  • editorBracketPairGuide.background1#c42bff44
  • editorBracketPairGuide.background2#c844ff44
  • editorBracketPairGuide.background3#d666ff44
  • editorBracketPairGuide.background4#8800cc44
  • editorBracketPairGuide.background5#66009944
  • editorBracketPairGuide.background6#44006644
  • editorGroupHeader.tabsBackground#000000
  • menubar.selectionBackground#110022
  • menubar.selectionForeground#d666ff
  • panel.background#000000
  • panel.border#0a001a
  • sideBar.background#000000
  • sideBar.border#0a001a
  • sideBar.foreground#e0e0e0
  • sideBarTitle.foreground#c055ff
  • statusBar.background#000000
  • statusBar.border#0a001a
  • statusBar.foreground#c055ff
  • tab.activeBackground#000000
  • tab.activeForeground#c055ff
  • tab.border#0a001a
  • tab.inactiveBackground#050505
  • tab.inactiveForeground#774488
  • terminal.background#000000
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#c055ff
  • titleBar.inactiveBackground#050505
  • titleBar.inactiveForeground#663388

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B2E8Bitalic
variable, string constant.other.placeholder#e0e0e0
constant.other.color#d666ff
invalid, invalid.illegal#aa33ff
keyword, storage.type, storage.modifier#c844ff
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#d666ff
punctuation.definition.block, punctuation.section.block, meta.brace.curly, punctuation.definition.arguments.begin, punctuation.definition.arguments.end#b85aff
punctuation.definition.bracket.square, meta.brace.square, punctuation.section.brackets, punctuation.definition.array#b85aff
punctuation.definition.parameters, punctuation.section.parameters, meta.brace.round, punctuation.definition.group#b85aff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#c055ff
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#a043ff
meta.block variable.other#c477ff
support.other.variable, string.other.link#c477ff
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#a042ff
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#e0aaff
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#c466ff
support.type#cc88ff
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#cc88ff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#b04dff
variable.language#b04dffitalic
entity.name.method.js#aa55ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#aa55ff
entity.other.attribute-name#c477ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#c466ffitalic
entity.other.attribute-name.class#c466ff
source.sass keyword.control#aa55ff
markup.inserted#e0aaff
markup.deleted#aa33ff
markup.changed#d666ff
string.regexp#cc88ff
constant.character.escape#cc88ff
*url*, *link*, *uri*#e0aaffunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#aa55ffitalic
source.js constant.other.object.key.js string.unquoted.label.js#b04dffitalic
source.json meta.structure.dictionary.json support.type.property-name.json#b04dff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d666ff
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#ff8080
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#dd99ff
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#eeb3ff
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#f0ccff
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#aa33ff
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#c055ff
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#c477ff
text.html.markdown, punctuation.definition.list_item.markdown#e0e0e0
text.html.markdown markup.inline.raw.markdown#cc88ff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7a6a8a
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#e0aaff
markup.italic#cc88ffitalic
markup.bold, markup.bold string#cc88ffbold
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#cc88ffbold
markup.underline#a042ffunderline
markup.quote punctuation.definition.blockquote.markdown#7a6a8a
markup.quoteitalic
string.other.link.title.markdown#aa55ff
string.other.link.description.title.markdown#cc88ff
constant.other.reference.link.markdown#c466ff
markup.raw.block#cc88ff
markup.raw.block.fenced.markdown#3a2a4a
punctuation.definition.fenced.markdown#3a2a4a
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e0e0e0
variable.language.fenced.markdown#7a6a8a
meta.separator#7a6a8abold
markup.table#e0e0e0
devil-theme by slurpchunk7 - VS Code Theme