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.

  • editor.background#ffffff
  • editor.foreground#000000
  • editor.lineHighlightBackground#ecebeb
  • editorLineNumber.foreground#ccc
  • sideBar.foreground#000
  • statusBar.background#ffffff
  • statusBar.border#ffffff
  • statusBar.debuggingBackground#fafbfc
  • statusBar.debuggingForeground#24292e
  • statusBar.foreground#24292e
  • statusBar.noFolderBackground#fafbfc
  • statusBar.noFolderForeground#24292e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.preprocessor, comment.documentation, comment.block.documentation, comment.block.documentation support.class, comment.block.documentation keyword.other.type, keyword.other.phpdoc.php, string.quoted.docstring.multi.python#808080
invalid.illegal#660000
source#000
keyword.operator#333
keyword.other, keyword.control, storage, keyword.operator.logical, storage.type, keyword.operator.type.php, keyword.operator.expression.of.js, keyword.operator.new#07abold
entity.name.exception, constant.character.escape, support.type#07a
string#2E7D32
support.constant, variable.language, constant.numeric, constant.language#DA564A
support.class, entity.name.type, support.constant.math#DA564A
variable, support.variable, entity.name.type.namespace.php, entity.name.type.class#000
keyword.other.class.php, meta.use support.class, meta.function-call entity.name.function#000
support.function.magic#DA564A
support.function, support.variable.property#07a
string.regexp, constant.character.set.regexp, keyword.operator.quantifier.regexp#4DA0DD
variable.language.this#4DA0DD
variable.parameter.function.language.special.self.python, variable.language.special.self.python#4DA0DD
meta.function.decorator support.type, entity.name.function.decorator#2E7D32
variable.parameter.function-call, constant#4DA0DD
keyword.operator.expression.in.js, keyword.operator.expression.typeof.js#07a
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#999
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, constant.character.entity, punctuation.definition.entity#444
entity.name.tag#07abold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#2B91AF
string.quoted.double.html#2E7D32
text.html#000
meta.selector.css, meta.selector entity punctuation, entity.name.tag.css#07a
meta.selector entity, punctuation.definition.entity.css#DA564A
meta.property-name, support.type.property-name#2E7D32
meta.property-value, meta.property-value constant.other, support.constant.property-value, source.css constant.numeric, source.css constant.language, source.css keyword.other.unit#000
source.css keyword.control#DA564A
punctuation.section.tag.twig#07a
variable.other.django.block, variable.other.django#000
keyword.control.twig#DA564A
support.constant.laravel-blade#2B91AF
keyword.blade#DA564A
source.php.embedded.line.html variable.other.php, source.php.embedded.line.html punctuation.definition.variable.php#000
support.type.property-name.json#07a
string.quoted.double.json#333
string.quoted.double.xml, string.quoted.single.xml#2E7D32

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...