Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#4F5A5C—
comment, entity.name.type.instance.jsdoc#98A6B5
string.quoted.double.block.python#798188—
entity.name.tag, support.class.component.tsx#f47171bold
meta.jsx.js, text.html.basic, meta.jsx.children#4F5A5C
entity.other.attribute-name.jsx#25A8CC
entity.other.attribute-name.id.html#FFB454—
entity.other.attribute-name.html, entity.other.attribute-name.ts, entity.other.attribute-name.tsx#25A8CC—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#525044—
declaration.tag, declaration.tag entity, meta.tag#E6B440—
constant.character.entity.html#F1E94B—
meta.selector.css entity.name.tag#f5f080—
meta.selector.css entity.other.attribute-name.id#FFB454—
meta.selector.css entity.other.attribute-name.class#8AAB50—
support.type.property-name.css#72AACA—
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#9FA32A—
meta.preprocessor.at-rule keyword.control.at-rule#F6AA11—
meta.property-value support.constant.named-color.css, meta.property-value constant#9FA32A—
meta.constructor.argument.css#EB939A—
keyword.control.at-rule.import.css#f7f09d—
variable.other.less#b6d877—
entity.other.less.mixin#b6d877—
source.css.less keyword.unit.css#EB939A—
meta.at-rule.media.scss#EBA12A—
keyword.other#ffa631underline bold
keyword, storage#E6B440bold
constant#87B335—
keyword.control, storage.type, keyword.operator.module.js, keyword.other.substitution, storage.modifier.tsx, switch-statement.expr.ts variable.other.readwrite.ts, switch-statement.expr.tsx variable.other.readwrite.tsx, switch-statement.expr.ts entity.name.function.ts, switch-statement.expr.tsx entity.name.function.tsx, keyword.control.loop.ts, keyword.control.loop.tsx, storage.modifier.async.ts, storage.modifier.async.tsx#EBA12Abold
entity.name.function, meta.definition.function, meta.method.declaration, meta.class meta.function-call variable.function, meta.class meta.method.declaration storage.type, support.function.builtin.js#25A8CC—
entity.name.class.js, entity.name.type.class, variable.other.class.js, entity.name.type.module.tsx, entity.other.inherited-class#25A8CCbold
meta.function-call variable.function, meta.function-call entity.name.function, meta.class meta.group.braces.curly meta.function-call variable.function#EB8661—
support.function, variable.function.constructor.js, new.expr entity.name.type#EB8661bold
variable.language.super#EB8661bold italic
entity.name.type, support.type.builtin, support.type.primitive#B1A5DEC7—
support.type.property-name.json#37BD71normal
meta.definition.property#25A8CC—
entity.other#72AACA—
string, keyword.other.template, punctuation.definition.string, punctuation.definition.string.quoted#37BD71—
support, support.constant#72AACA—
support.class, support.type.object.dom.js, support.type.object.console.js, support.variable#72AACAbold
meta.function, punctuation.definition.group, meta.brackets, meta.property.object.js, punctuation.definition.group.js, punctuation.definition.parameters, meta.group.braces.square.js, meta.brace.round, meta.group.braces.round, punctuation.definition.block.js, punctuation.definition.block.ts, punctuation.definition.block.tsx, meta.brace.square, punctuation.section.embedded, meta.brace.curly.begin.js, meta.brace.curly.end.js, meta.embedded.expression.jsx, punctuation.definition.brackets.js, punctuation.terminator.statement.js, punctuation.accessor.js, meta.block.ts punctuation.terminator.statement.ts, meta.block.tsx punctuation.terminator.statement.tsx, meta.var.expr.ts support.variable.property.ts, meta.var.expr.tsx support.variable.property.tsx#4F5A5Cnormal
meta.object-literal, variable.object.property, punctuation.separator.key-value.js, string.unquoted.label.js, meta.brackets.js, meta.property.object.js, source.tsx variable.other.object.property, source.tsx variable.other.property, source.ts variable.other.object.property, source.ts variable.other.property#4F5A5C—
variable.other, meta.class meta.group.braces.curly meta.group.braces.round variable.other.readwrite#32453D—
variable.parameter, meta.class meta.group.braces.round variable.other.readwrite#32453Dunderline italic
variable.language, support.variable.property.ts, support.variable.property.tsx#32453Dbold italic
support.type#32453Dbold
invalid#F8F8F8—
text source——
text.html.ruby source——
string.quoted source#B7D877—
string constant#B7D877—
string.regexp#37BD71—
keyword.control.anchor.regexp—
punctuation.definition.group.assertion.regexp#37BD71—
punctuation.definition.group.regexp#25A8CC—
other.preprocessor.c#8996A8—
other.preprocessor.c entity#AFC4DB—
entity.other.attribute-name.angular.html, source.angular.embedded.html#FF3A83—