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#000a1a
  • activityBar.foreground#5588ff
  • activityBarBadge.background#3575e5
  • editor.background#000000
  • editor.foreground#e0e0e0
  • editorBracketHighlight.foreground1#2b7fff
  • editorBracketHighlight.foreground2#4488ff
  • editorBracketHighlight.foreground3#66aaff
  • editorBracketHighlight.foreground4#0055cc
  • editorBracketHighlight.foreground5#003399
  • editorBracketHighlight.foreground6#002266
  • editorBracketPairGuide.activeBackground1#2b7fff
  • editorBracketPairGuide.activeBackground2#4488ff
  • editorBracketPairGuide.activeBackground3#66aaff
  • editorBracketPairGuide.activeBackground4#0055cc
  • editorBracketPairGuide.activeBackground5#003399
  • editorBracketPairGuide.activeBackground6#002266
  • editorBracketPairGuide.background1#2b7fff44
  • editorBracketPairGuide.background2#4488ff44
  • editorBracketPairGuide.background3#66aaff44
  • editorBracketPairGuide.background4#0055cc44
  • editorBracketPairGuide.background5#00339944
  • editorBracketPairGuide.background6#00226644
  • editorGroupHeader.tabsBackground#000000
  • menubar.selectionBackground#001122
  • menubar.selectionForeground#66aaff
  • panel.background#000000
  • panel.border#000a1a
  • sideBar.background#000000
  • sideBar.border#000a1a
  • sideBar.foreground#e0e0e0
  • sideBarTitle.foreground#5588ff
  • statusBar.background#000000
  • statusBar.border#000a1a
  • statusBar.foreground#5588ff
  • tab.activeBackground#000000
  • tab.activeForeground#5588ff
  • tab.border#000a1a
  • tab.inactiveBackground#050505
  • tab.inactiveForeground#445588
  • terminal.background#000000
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#5588ff
  • titleBar.inactiveBackground#050505
  • titleBar.inactiveForeground#334488

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#2E4A8Bitalic
variable, string constant.other.placeholder#e0e0e0
constant.other.color#66aaff
invalid, invalid.illegal#3377ff
keyword, storage.type, storage.modifier#4488ff
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#66aaff
punctuation.definition.block, punctuation.section.block, meta.brace.curly, punctuation.definition.arguments.begin, punctuation.definition.arguments.end#5a9aff
punctuation.definition.bracket.square, meta.brace.square, punctuation.section.brackets, punctuation.definition.array#5a9aff
punctuation.definition.parameters, punctuation.section.parameters, meta.brace.round, punctuation.definition.group#5a9aff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#5588ff
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#4370ff
meta.block variable.other#7799ff
support.other.variable, string.other.link#7799ff
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#428cff
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#aaccff
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#6688ff
support.type#88aaff
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#88aaff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#4d88ff
variable.language#4d88ffitalic
entity.name.method.js#5588ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#5588ff
entity.other.attribute-name#77aaff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#6688ffitalic
entity.other.attribute-name.class#6688ff
source.sass keyword.control#5588ff
markup.inserted#aaccff
markup.deleted#3377ff
markup.changed#66aaff
string.regexp#88aaff
constant.character.escape#88aaff
*url*, *link*, *uri*#aaccffunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5588ffitalic
source.js constant.other.object.key.js string.unquoted.label.js#4d88ffitalic
source.json meta.structure.dictionary.json support.type.property-name.json#4d88ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#66aaff
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#99bbff
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#b3ccff
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#ccddee
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#3377ff
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#5588ff
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#7799ff
text.html.markdown, punctuation.definition.list_item.markdown#e0e0e0
text.html.markdown markup.inline.raw.markdown#88aaff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6a7a8a
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#aaccff
markup.italic#88aaffitalic
markup.bold, markup.bold string#88aaffbold
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#88aaffbold
markup.underline#428cffunderline
markup.quote punctuation.definition.blockquote.markdown#6a7a8a
markup.quoteitalic
string.other.link.title.markdown#5588ff
string.other.link.description.title.markdown#88aaff
constant.other.reference.link.markdown#6688ff
markup.raw.block#88aaff
markup.raw.block.fenced.markdown#2a3a4a
punctuation.definition.fenced.markdown#2a3a4a
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e0e0e0
variable.language.fenced.markdown#6a7a8a
meta.separator#6a7a8abold
markup.table#e0e0e0
devil-theme by slurpchunk7 - VS Code Theme