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.

  • titleBar.activeBackground#252526

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ccc
variable.language#05ad97
variable.other.member#05ad97
variable.parameter.function#A6B2C0
comment, punctuation.definition.comment#5c6370italic
meta.function.c#e06c75ff
keyword.control.cpp#e5c07bff
punctuation.section.block.begin.bracket.curly.cpp, punctuation.section.block.end.bracket.curly.cpp, punctuation.terminator.statement.c, punctuation.section.block.begin.bracket.curly.c, punctuation.section.block.end.bracket.curly.c, punctuation.section.parens.begin.bracket.round.c, punctuation.section.parens.end.bracket.round.c, punctuation.section.parameters.begin.bracket.round.c, punctuation.section.parameters.end.bracket.round.c#abb2bfff
variable.other.constant.js#e5c07bff
support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.scss#d19a66ff
support.constant.color.w3c-standard-color-name.css, entity.other.attribute-name.class.css#d19a66ff
support.type.vendored.property-name.css#56b6c2ff
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#e06c75ff
support.module.node.js, support.type.object.module.js, support.module.node.js#e5c07bff
variable.other.readwrite.js, meta.object-literal.key.js, support.variable.property.js, support.variable.object.process.js#05ad97
support.constant.json.js#d19a66ff
punctuation.definition.comment#5C6370
none#A6B2C0
keyword.operator#abb2bf
keyword#e06c75ff
variable#05ad97
variable.other.readwrite#d0d0d0
token.package.keyword#a15ebb
token.package#abb2bf
entity.name.function, variable.function, meta.function-call.generic.python, support.function.any-method#3193c6
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#e5c07b
entity.name.class.identifier.namespace.type#e5c07b
entity.name.class#61afef
entity.name.type#e5c07b
keyword.control#e06c75ff
control.elements, keyword.operator.less#d19a66
storage#c678dd
support.function#56b6c2
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#d19a66
meta.tag#abb2bf
string, entity.other.inherited-class#05ad97
constant.other.symbol#05ad97
constant.numeric#d19a66
none#d19a66
none#d19a66
constant#d19a66
punctuation.definition.constant#d19a66
entity.name.tag#e06c75
entity.other.attribute-name#d19a66
entity.other.attribute-name.id#61afefff
meta.selector#c678dd
none#D2945D
keyword.other.unit#d19a66
string.regexp#57B6C2
constant.character.escape#57B6C2
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
function.parameter#d19a66
rgb-value#56B6C2
inline-color-decoration rgb-value#d19a66
less rgb-value#d19a66
var.this.js, var.this.ts, variable.language.this.js#e5c07bff

Shiki preview

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

Loading...

Flat UI - Coding Theme