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#20262c
  • editor.foreground#f2f4f6
  • editor.lineHighlightBackground#283037
  • editor.selectionBackground#8cd6d844
  • editor.selectionHighlightBackground#8cd6d822
  • editorBracketHighlight.foreground1#627487
  • editorBracketHighlight.foreground2#e27ab9
  • editorBracketHighlight.foreground3#afa747
  • editorBracketHighlight.foreground4#4fb1d3
  • editorBracketHighlight.foreground5#e4885e
  • editorBracketHighlight.foreground6#55b991
  • editorCursor.foreground#8cd6d8
  • editorRuler.foreground#313943
  • editorWhitespace.foreground#313943
  • panel.background#20262c
  • panel.border#627487
  • sideBar.background#20262c
  • sideBar.foreground#d0d6dd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Defaults#f2f4f6
source,meta.block,text,variable,support.other.variable,constant.character,constant.other,variable.parameter,meta.import,variable.other.readwrite.alias,variable.other.property,support.variable.property.dom,meta.method.body.java,variable.parameter.function.swift#f2f4f6
meta.brace,punctuation,punctuation.section.embedded.end,comment,constant.character.escape,keyword.operator.class,keyword.operator.access.dot.rust,meta.parameter-clause.swift#7b8ea2
punctuation.section.array#9c9bdd
constant.other,constant.numeric,variable.other.constant,support.constant.core,support.constant.property-value,meta.property-value,constant.language,support.variable.dom,constant.keyword.clojure,support.constant.swift#8cd6d8
entity.name.function,support.function,source.sql#c6c5eb
storage.type,entity.name.type,support.class.builtin,meta.type_params,meta.type.annotation,support.type.primitive,support.type.builtin,support.class,support.type.core,meta.class,keyword.other.type,meta.function.parameters.php,support.type.swift#86b0de
variable.language.this,variable.language.super,variable.parameter.function.language.special.self.python,variable.language.special.self.python#7b8ea2bold
meta.type.parameters#d3807d
storage.type.js,storage.type.ts,storage.type.type.ts,keyword,storage.modifier,storage.type.function,storage.type.class,storage.type.rust,storage.type.struct.swift,storage.type.extension.swift#9c9bdditalic
meta.object-literal.key,meta.structure.dictionary,support.type.property-name,support.type.vendored.property-name,entity.other.attribute-name#bd9bdd
string,string.regexp,constant.other.character-class,meta.attribute-selector#a6d37d
punctuation.definition.string,constant.character.escape#57862d
entity.name.tag,support.class.component.js,entity.other.attribute-name.id.css,entity.other.attribute-name.class.css#86b0debold
keyword.operator,support.variable.object,keyword.control.anchor.regexp,entity.name.operator.cpp#d3807dnormal
markup.heading#86b0de
markup.underline.link,beginning.punctuation.definition,punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown#7b8ea2
string.other.link.title.markdown#bd9bdd
markup.bold.markdownbold
markup.italic.markdownitalic