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#090909
  • activityBar.border#444
  • activityBar.foreground#eee
  • activityBar.inactiveForeground#444
  • activityBarBadge.background#eee
  • activityBarBadge.foreground#090909
  • editor.background#090909
  • editor.foreground#bbb
  • editorGroupHeader.tabsBackground#111
  • editorLineNumber.foreground#333
  • menu.background#111
  • menu.selectionBackground#090909
  • menu.selectionBorder#444
  • sideBar.background#111
  • sideBar.border#444
  • sideBar.foreground#bbb
  • sideBarSectionHeader.background#222
  • sideBarSectionHeader.foreground#999
  • sideBarTitle.foreground#999
  • statusBar.background#444
  • tab.activeBorderTop#eee
  • tab.border#111
  • tab.inactiveBackground#111
  • tab.inactiveForeground#999
  • titleBar.activeBackground#090909
  • titleBar.border#444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#383838italic bold
entity.name.tag.css, meta.selector.css, entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, storage.type.js, storage.type.function.js, punctuation.definition.block.js, variable.language.this.js#7578fdbold
keyword.control, keyword.operator#74e3ff
entity.other.attribute-name.class.css, meta.attribute.class.html, meta.template.expression.js, support.variable.property.js#c5b34c
entity.other.attribute-name.id.css, meta.attribute.id.html#92c54f
meta.brace.round.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, meta.at-rule.media.header.css, keyword.control.at-rule.charset.css, meta.definition.method.js, meta.definition.function.js, storage.type.function.arrow.js#c089ff
meta.function-call.js#8163b8italic
meta.tag, meta.property-value.css, variable.parameter.js, support.type.property-name.json.comments#d88d5b
constant.numeric.css, constant.numeric.decimal.js, constant.language.boolean.true.js, constant.language.null.js, constant.language.nan.js, constant.language.undefined.js, meta.brace.square.js, support.constant.json#f76d8f
string.template.js, string.quoted.double.html, variable.parameter.url.css, string.quoted.double.css, string.quoted.single.js, string.quoted.double.json.comments#4bad71italic
constant.other.color.rgb-value, meta.function.color.css#58d6df
meta.property-name.css, variable, meta.definition.variable.js#eee
variable.other.object.js#9c9c9c
support.type.vendored.property-name.css, variable.other.property.js, meta.object.member.js#9c9c9c
keyword.other.important.css#ff4343italic