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.

  • activityBarBadge.background#007acc
  • editor.background#303234
  • editor.foreground#8E846C
  • editor.lineHighlightBorder#303234
  • editor.selectionForeground#8383839C
  • editorWhitespace.foreground#3f3b37
  • sideBarTitle.foreground#bbbbbb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7D9B7Ditalic
keyword.other, keyword.operator, keyword.operator.comparison, keyword.operator.logical, keyword.control.import.ts, storage.type.class.coffee, entity.name.tag.template.html, entity.name.tag.style.html, entity.name.tag.script.html#599EC6
entity.name.type.instance.coffee, entity.name.type.js, entity.name.type.ts, keyword.type.cs, storage.type#9E7FCB
meta.property-name, meta.selector, meta.template.expression.js, support.type.property-name.json#aaac61
entity.name.function, keyword.operator.arrow, storage.type.function.arrow, storage.type.function, support.function, text.html.template.mustache.body, expression.embedded.vue, meta.directive.vue, source.directive.vue#d2aa41
string, editor.selectionHighlightBackground, text.block.pipe.pug#BB8232italic
keyword.control.flow, meta.return.type.ts#99a4de
keyword.other.var.cs, meta.brace.round, punctuation.curlybrace, punctuation.definition.arguments.begin.bracket.round.coffee, punctuation.definition.arguments.end.bracket.round.coffee, punctuation.definition.array.begin.bracket.square.coffee, punctuation.definition.array.end.bracket.square.coffee, punctuation.definition.block, punctuation.definition.parameters.begin.bracket.round.coffee, punctuation.definition.parameters.end.bracket.round.coffee, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.tag, punctuation.definition.typeparameters, punctuation.parenthesis, punctuation.terminator.statement, storage.modifier, storage.type.function.ts, storage.type.js, storage.type.ts, text.html.template.mustache.escape.begin, text.html.template.mustache.escape.end, punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html#5C5D5Eitalic
entity.name.tag, entity.name.type.class, keyword.control#ead4a1
support.type.property-name.css#6b8b2eitalic
meta.toc-list.class.html, entity.other.attribute-name.class.css, entity.other.attribute-name.class.html, meta.attribute-with-value.class.html, entity.other.attribute-name.class.pug#d4bf00
entity.other.attribute-name.id.css, entity.other.attribute-name.id.html, meta.attribute-with-value.id.html, meta.toc-list.id.html, entity.other.attribute-name.id.pug#51d7ec