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#1a0000
  • activityBar.foreground#ff5555
  • activityBarBadge.background#e53935
  • editor.background#000000
  • editor.foreground#e0e0e0
  • editorBracketHighlight.foreground1#ff2b2b
  • editorBracketHighlight.foreground2#ff4444
  • editorBracketHighlight.foreground3#ff6666
  • editorBracketHighlight.foreground4#cc0000
  • editorBracketHighlight.foreground5#990000
  • editorBracketHighlight.foreground6#660000
  • editorBracketPairGuide.activeBackground1#ff2b2b
  • editorBracketPairGuide.activeBackground2#ff4444
  • editorBracketPairGuide.activeBackground3#ff6666
  • editorBracketPairGuide.activeBackground4#cc0000
  • editorBracketPairGuide.activeBackground5#990000
  • editorBracketPairGuide.activeBackground6#660000
  • editorBracketPairGuide.background1#ff2b2b44
  • editorBracketPairGuide.background2#ff444444
  • editorBracketPairGuide.background3#ff666644
  • editorBracketPairGuide.background4#cc000044
  • editorBracketPairGuide.background5#99000044
  • editorBracketPairGuide.background6#66000044
  • editorGroupHeader.tabsBackground#000000
  • menubar.selectionBackground#220000
  • menubar.selectionForeground#ff6666
  • panel.background#000000
  • panel.border#1a0000
  • sideBar.background#000000
  • sideBar.border#1a0000
  • sideBar.foreground#e0e0e0
  • sideBarTitle.foreground#ff5555
  • statusBar.background#000000
  • statusBar.border#1a0000
  • statusBar.foreground#ff5555
  • tab.activeBackground#000000
  • tab.activeForeground#ff5555
  • tab.border#1a0000
  • tab.inactiveBackground#050505
  • tab.inactiveForeground#884444
  • terminal.background#000000
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ff5555
  • titleBar.inactiveBackground#050505
  • titleBar.inactiveForeground#883333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B2E2Eitalic
variable, string constant.other.placeholder#e0e0e0
constant.other.color#ff6666
invalid, invalid.illegal#ff3333
keyword, storage.type, storage.modifier#ff4444
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#ff6666
punctuation.definition.block, punctuation.section.block, meta.brace.curly, punctuation.definition.arguments.begin, punctuation.definition.arguments.end#ff5a5a
punctuation.definition.bracket.square, meta.brace.square, punctuation.section.brackets, punctuation.definition.array#ff5a5a
punctuation.definition.parameters, punctuation.section.parameters, meta.brace.round, punctuation.definition.group#ff5a5a
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff5555
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ff7043
meta.block variable.other#ff7777
support.other.variable, string.other.link#ff7777
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff8c42
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#ffaaaa
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#ffaa66
support.type#ffaa88
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#ffaa88
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff4d4d
variable.language#ff4d4ditalic
entity.name.method.js#ff8855italic
meta.class-method.js entity.name.function.js, variable.function.constructor#ff8855
entity.other.attribute-name#ff77aa
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffaa66italic
entity.other.attribute-name.class#ffaa66
source.sass keyword.control#ff8855
markup.inserted#ffaaaa
markup.deleted#ff3333
markup.changed#ff6666
string.regexp#ff8888
constant.character.escape#ff8888
*url*, *link*, *uri*#ffaaaaunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ff8855italic
source.js constant.other.object.key.js string.unquoted.label.js#ff4d4ditalic
source.json meta.structure.dictionary.json support.type.property-name.json#ff4d4d
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff6666
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#ff9999
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#ffb3b3
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#ffcccc
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#ff3333
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#ff5555
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#ff7777
text.html.markdown, punctuation.definition.list_item.markdown#e0e0e0
text.html.markdown markup.inline.raw.markdown#ff8888
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8a6a6a
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffaaaa
markup.italic#ff8888italic
markup.bold, markup.bold string#ff8888bold
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#ff8888bold
markup.underline#ff8c42underline
markup.quote punctuation.definition.blockquote.markdown#8a6a6a
markup.quoteitalic
string.other.link.title.markdown#ff8855
string.other.link.description.title.markdown#ff8888
constant.other.reference.link.markdown#ffaa66
markup.raw.block#ff8888
markup.raw.block.fenced.markdown#4a2a2a
punctuation.definition.fenced.markdown#4a2a2a
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e0e0e0
variable.language.fenced.markdown#8a6a6a
meta.separator#8a6a6abold
markup.table#e0e0e0