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#101010
  • activityBar.foreground#4dabf7
  • activityBarBadge.background#4dabf7
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#82c2ff
  • breadcrumb.background#151515
  • breadcrumb.focusForeground#63a4ff
  • breadcrumb.foreground#777777
  • editor.background#151515
  • editor.foreground#f0f0f0
  • editor.lineHighlightBackground#262626
  • editorGroup.emptyBackground#151515
  • editorGroupHeader.tabsBackground#101010
  • editorGroupHeader.tabsBorder#101010
  • editorIndentGuide.activeBackground1#ff6b6b
  • editorIndentGuide.activeBackground2#ffa94d
  • editorIndentGuide.activeBackground3#ffd43b
  • editorIndentGuide.activeBackground4#69db7c
  • editorIndentGuide.activeBackground5#4dabf7
  • editorIndentGuide.activeBackground6#b197fc
  • editorIndentGuide.background1#ff6b6b
  • editorIndentGuide.background2#ffa94d
  • editorIndentGuide.background3#ffd43b
  • editorIndentGuide.background4#69db7c
  • editorIndentGuide.background5#4dabf7
  • editorIndentGuide.background6#b197fc
  • sideBar.background#101010
  • sideBarTitle.foreground#4dabf7
  • statusBar.background#0c0c0c
  • statusBar.foreground#f0f0f0
  • tab.activeBackground#151515
  • tab.activeBorderTop#ff6b6b
  • tab.activeForeground#82c2ff
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#777777
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#63a4ff
  • titleBar.inactiveBackground#0c0c0c
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#808080italic
variable, string constant.other.placeholder#f0f0f0
constant.other.color#ffa94d
invalid, invalid.illegal#ff6b6b
keyword, storage.type, storage.modifier#ff6b6b
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#748ffc
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ffd43b
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#4dabf7
meta.block variable.other#82c2ff
support.other.variable, string.other.link#f06595
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffa94d
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#69db7c
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#b197fc
support.type#f0f0f0
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#b197fc
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#f06595
variable.language#b197fcitalic
entity.name.method.js#4dabf7italic
meta.class-method.js entity.name.function.js, variable.function.constructor#4dabf7
entity.other.attribute-name#ff6b6b
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#748ffcitalic
entity.other.attribute-name.class#ffd43b
source.sass keyword.control#4dabf7
markup.inserted#69db7c
markup.deleted#ff6b6b
markup.changed#ffa94d
string.regexp#4dabf7
constant.character.escape#748ffc
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4dabf7italic
source.js constant.other.object.key.js string.unquoted.label.js#f06595italic
source.json meta.structure.dictionary.json support.type.property-name.json#ff6b6b
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4dabf7
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#ffd43b
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#69db7c
text.html.markdown, punctuation.definition.list_item.markdown#f0f0f0
text.html.markdown markup.inline.raw.markdown#ff6b6b
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffd43b
markup.italic#f06595italic
markup.bold, markup.bold string#ffd43bbold