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#24292e
  • 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
#333333ff
comment, punctuation.definition.comment, comment.block.preprocessor, comment.documentation, comment.block.documentation, comment.block.documentation keyword.other.type.php, comment.block.documentation support.class.builtin.php, comment.block.documentation support.other.namespace, comment.block.documentation support.class.php#6a737d
invalid.deprecated
invalid.illegal#660000
source, constant#24292e
keyword, storage, keyword.operator.logical, storage.type, keyword.operator#d73a49
support.type, entity.name.exception, constant.other.caps, meta.use, meta.use support.class, support.other.namespace, support.class.builtin.php, support.class.php#005cc5
string#032f62
support.constant, variable.language, constant.numeric, constant.language#005cc5
variable, support.variable#24292e
entity.name.type, meta.other.inherited-class, entity.other.inherited-class#6f42c1
meta.function entity.name.function, source.css entity.name.function#6f42c1
support.function, support.variable.property#005cc5
string.regexp, constant.character.set.regexp, keyword.operator.quantifier.regexp#005cc5
variable.language.this#24292e
variable.parameter.function.language.special.self.python, variable.language.special.self.python, constant.character.format.placeholder.other#005cc5
meta.function.decorator support.type, entity.name.function.decorator, meta.function.parameter.typehinted storage.type#005cc5
keyword.operator.expression.in.js, keyword.operator.expression.typeof.js#005cc5
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#24292e
entity.name.tag#22863a
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#6f42c1
string.quoted.double.html#032f62
text.html#24292e
meta.selector.css, meta.selector entity punctuation, entity.name.tag.css#22863a
meta.selector entity, punctuation.definition.entity.css#6f42c1
meta.property-name, support.type.property-name, source.css keyword.other.unit#005cc5
meta.property-value, meta.property-value constant.other, support.constant.property-value, source.css constant.numeric, source.css constant.language#24292e
punctuation.section.tag.twig#005cc5
keyword.control.twig#d73a49
variable.other.django.block, variable.other.django#24292e
support.constant.laravel-blade#005cc5
entity.name.function.laravel-blade#d73a49
source.php.embedded.line.html variable.other.php, source.php.embedded.line.html punctuation.definition.variable.php#24292e
support.type.property-name.json#005cc5
string.quoted.double.json#000

Shiki preview

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

Loading...