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#1C2022
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#65737e55
  • editor.selectionBackground#ADD6FF26
  • editorCursor.foreground#c0c5ce
  • editorWarning.foreground#f3c863
  • editorWhitespace.foreground#65737e
  • statusBar.background#333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C6370italic
comment markup.link#5C6370
entity.name.type#FAC863
entity.other.inherited-class#98C379
keyword#66b9f4
keyword.control#66b9f4
keyword.operator#ABB2BF
keyword.other.special-method#66b9f4
keyword.other.unit#F99157
storage#C678DD
storage.type.annotation, storage.type.primitive#C678DD
storage.modifier.package, storage.modifier.import#ABB2BF
constant#F99157
constant.variable#F99157
constant.character.escape#56B6C2
constant.numeric#F99157
constant.other.color#56B6C2
constant.other.symbol#56B6C2
variable#E06C75
variable.interpolation#BE5046
variable.parameter#ABB2BF
string#98C379
string.regexp#56B6C2
string.regexp source.ruby.embedded#FAC863
string.other.link#E06C75
punctuation.definition.comment#5C6370
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#ABB2BF
punctuation.definition.heading, punctuation.definition.identity#66b9f4
punctuation.definition.bold#FAC863bold
punctuation.definition.italic#C678DDitalic
punctuation.section.embedded#BE5046
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#ABB2BF
support.class#FAC863
support.type#56B6C2
support.function#56B6C2
support.function.any-method#66b9f4
entity.name.function#66b9f4
entity.name.class, entity.name.type.class#FAC863
entity.name.section#66b9f4
entity.name.tag#E06C75
entity.other.attribute-name#66b9f4italic
entity.other.attribute-name.id#66b9f4
meta.class#FAC863
meta.class.body#ABB2BF
meta.method-call, meta.method#ABB2BF
meta.definition.variable#E06C75
meta.link#F99157
meta.require#66b9f4
meta.selector#C678DD
meta.separator#ABB2BF
meta.tag#ABB2BF
underline
none#ABB2BF
invalid.deprecated#523D14
invalid.illegalwhite
markup.bold#F99157bold
markup.changed#C678DD
markup.deleted#E06C75
markup.italic#C678DDitalic
markup.heading#E06C75
markup.heading punctuation.definition.heading#66b9f4
markup.link#C678DD
markup.inserted#98C379
markup.quote#F99157
markup.raw#98C379
source.c keyword.operator#C678DD
source.cpp keyword.operator#C678DD
source.cs keyword.operator#C678DD
source.css property-name, source.css property-value#828997
source.css property-name.support, source.css property-value.support#ABB2BF
source.gfm markup
source.gfm link entity#66b9f4
source.go storage.type.string#C678DD
source.ini keyword.other.definition.ini#E06C75
source.java storage.modifier.import#FAC863
source.java storage.type#FAC863
source.java keyword.operator.instanceof#C678DD
source.java-properties meta.key-pair#E06C75
source.java-properties meta.key-pair > punctuation#ABB2BF
source.js keyword.operator#56B6C2
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void#C678DD
source.json meta.structure.dictionary.json > string.quoted.json#E06C75
source.js string.unquoted.js#E06C75
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E06C75
source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#98C379
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#56B6C2
source.ruby constant.other.symbol > punctuationinherit
source.python keyword.operator.logical.python#C678DD
source.python variable.parameter#F99157
meta.attribute.rust#BCC199
storage.modifier.lifetime.rust, entity.name.lifetime.rust#33E8EC
keyword.unsafe.rust#CC6B73
customrule#ABB2BF
support.type.property-name#FAC863
string.quoted.double punctuation#98C379
support.constant#F99157
support.type.property-name.json#E06C75
support.type.property-name.json punctuation#E06C75
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#56B6C2
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#56B6C2
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#ABB2BF
support.variable.dom.js, support.variable.dom.ts#E06C75
support.variable.property.dom.js, support.variable.property.dom.ts#E06C75
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#BE5046
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#ABB2BF
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#ABB2BF
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#ABB2BF
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#E06C75
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#E06C75
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#C678DD
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#C678DD
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx#ABB2BF
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#ABB2BF
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#ABB2BF
meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx#F99157
source.js support.variable, source.ts support.variable, source.tsx support.variable#E06C75
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#F99157
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#C678DD
source.ts keyword.operator, source.tsx keyword.operator#56B6C2
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #ABB2BF
constant.language.import-export-all.js, constant.language.import-export-all.ts#E06C75
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#56B6C2
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#ABB2BF
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#E06C75
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#F99157
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#E06C75
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#98C379
source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator#ABB2BF
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#98C379
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#ABB2BF
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#ABB2BF
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#ABB2BF
source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator#ABB2BF
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#ABB2BF
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#FAC863
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#E06C75
constant.language.json#56B6C2
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#F99157
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#56B6C2
meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition#98C379
meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template#98C379
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#C678DD
source.python constant.other#ABB2BF
source.python constant#F99157
constant.character.format.placeholder.other.python storage#F99157
support.variable.magic.python#E06C75
meta.function.parameters.python#F99157
punctuation.separator.annotation.python#ABB2BF
punctuation.separator.parameters.python#ABB2BF
entity.name.variable.field.cs#E06C75
source.cs keyword.operator#ABB2BF
variable.other.readwrite.cs#ABB2BF
variable.other.object.cs#ABB2BF
variable.other.object.property.cs#ABB2BF
entity.name.variable.property.cs#66b9f4
storage.type.cs#FAC863
keyword.other.unsafe.rust#E06C75
markup.raw.block.markdown#ABB2BF
punctuation.definition.variable.shell#E06C75
support.constant.property-value.css#F99157
punctuation.definition.constant.css#F99157
punctuation.separator.key-value.scss#E06C75
punctuation.definition.constant.scss#F99157
meta.property-list.scss punctuation.separator.key-value.scss#ABB2BF
storage.type.primitive.array.java#FAC863
entity.name.section.markdown#E06C75
punctuation.definition.heading.markdown#E06C75
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#F99157
markup.inline.raw.markdown#98C379
beginning.punctuation.definition.list.markdown#E06C75
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#C678DD
markup.underline.link.markdown, markup.underline.link.image.markdown#C678DD
string.other.link.title.markdown, string.other.link.description.markdown#66b9f4
punctuation.separator.variable.ruby#E06C75
variable.other.constant.ruby#F99157
keyword.operator.other.ruby#98C379
punctuation.definition.variable.php#E06C75
meta.class.php#ABB2BF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6