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.

  • activityBar.activeBackground#e8dfc48a
  • activityBar.background#f6f4ec
  • activityBar.border#cecdc2
  • activityBar.foreground#657b83
  • breadcrumb.background#f6f4ec
  • breadcrumb.foreground#657b83
  • editor.background#fffcf4
  • editor.foreground#657b83
  • editor.lineHighlightBackground#e8dfc48a
  • editor.selectionBackground#1172f1be
  • editorGroupHeader.border#cecdc2
  • editorGroupHeader.noTabsBackground#f6f4ec
  • editorGroupHeader.tabsBackground#f6f4ec
  • editorGroupHeader.tabsBorder#e8dfc48a
  • editorGutter.background#f6f4ec
  • editorLineNumber.foreground#9f9371
  • editorWhitespace.foreground#eee8d5
  • editorWidget.background#f6f4ec
  • editorWidget.border#cecdc2
  • editorWidget.foreground#657b83
  • focusBorder#f2f2f200
  • input.background#e8dfc48a
  • input.foreground#657b83
  • menu.background#f6f4ec
  • menu.foreground#657b83
  • menu.selectionBackground#1172f1be
  • menu.selectionForeground#657b83
  • sideBar.background#fffcf4
  • sideBar.border#f3f0cd
  • sideBar.foreground#657b83
  • sideBarSectionHeader.background#f6f4ec
  • sideBarSectionHeader.border#cecdc2
  • sideBarSectionHeader.foreground#657b83
  • statusBar.background#f6f4ec
  • statusBar.border#cecdc2
  • statusBar.foreground#657b83
  • statusBarItem.remoteBackground#e1294bfb
  • tab.activeBackground#e8dfc48a
  • tab.hoverBackground#bcd68d73
  • tab.inactiveBackground#f6f4ec
  • titleBar.activeBackground#f6f4ec
  • titleBar.activeForeground#657b83
  • titleBar.border#cecdc2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.language.this.js#A626A4—
punctuation.separator.key-value.html#AA5D00—
text.html.vue-html#A626A4—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#A0A1A7—
meta.object-literal.key.js#AA6B51—
comment#93a1a1italic
comment markup.link#A0A1A7—
entity.name.type#C18401—
entity.other.inherited-class#50A14F—
keyword#A626A4—
keyword.control#A626A4—
keyword.operator#3e4b53—
keyword.other.special-method#4078F2—
keyword.other.unit#BF6EE0—
storage#A626A4—
storage.type.annotation, storage.type.primitive#A626A4—
storage.modifier.package, storage.modifier.import#4078F2—
constant#BF6EE0—
constant.variable#BF6EE0—
constant.character.escape#3e4b53—
constant.numeric#BF6EE0—
constant.other.color#3e4b53—
constant.other.symbol#3e4b53—
variable#3e4b53—
variable.interpolation#CA1243—
variable.parameter#D47500italic
string#019875—
string.regexp#3e4b53—
string.regexp source.ruby.embedded#C18401—
string.other.link#E45649—
punctuation.definition.comment#A0A1A7—
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#4078F2—
punctuation.definition.heading, punctuation.definition.identity#4078F2—
punctuation.definition.bold#C18401bold
punctuation.definition.italic#A626A4italic
punctuation.section.embedded#CA1243—
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#4078F2—
support.class#856514—
support.type#3e4b53—
support.function#4078F2—
support.function.any-method#4078F2—
entity.name.function#4078F2—
entity.name.class, entity.name.type.class#C18401—
entity.name.section#4078F2—
entity.name.tag#3A539B—
entity.other.attribute-name#AA5D00italic
entity.other.attribute-name.id#4078F2—
meta.class#C18401—
meta.class.body#4078F2—
meta.method-call, meta.method#4078F2—
meta.definition.variable#E45649—
meta.link#BF6EE0—
meta.require#4078F2—
meta.selector#A626A4—
meta.separator#4078F2—
meta.tag#939393—
underline——
none#4078F2—
invalid.deprecated#000000—
invalid.illegalwhite—
markup.bold#BF6EE0bold
markup.changed#A626A4—
markup.deleted#E45649—
markup.italic#A626A4italic
markup.heading#E45649—
markup.heading punctuation.definition.heading#4078F2—
markup.link#A626A4—
markup.inserted#50A14F—
markup.quote#BF6EE0—
markup.raw#50A14F—
source.c keyword.operator#A626A4—
source.cpp keyword.operator#A626A4—
source.cs keyword.operator#A626A4—
source.css property-name, source.css property-value#696C77—
source.css property-name.support, source.css property-value.support#4078F2—
source.gfm markup——
source.gfm link entity#4078F2—
source.go storage.type.string#A626A4—
source.ini keyword.other.definition.ini#E45649—
source.java storage.modifier.import#C18401—
source.java storage.type#C18401—
source.java keyword.operator.instanceof#A626A4—
source.java-properties meta.key-pair#E45649—
source.java-properties meta.key-pair > punctuation#4078F2—
source.js keyword.operator#3e4b53—
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#A626A4—
source.json meta.structure.dictionary.json > string.quoted.json#E45649—
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E45649—
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#50A14F—
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#3e4b53—
source.ruby constant.other.symbol > punctuationinherit—
source.python keyword.operator.logical.python#A626A4—
source.python variable.parameter#BF6EE0—
meta.attribute.rust#606135—
storage.modifier.lifetime.rust, entity.name.lifetime.rust#11C4C6—
keyword.unsafe.rust#882328—
customrule#4078F2—
support.type.property-name#4078F2—
string.quoted.double punctuation#50A14F—
support.constant#BF6EE0—
support.type.property-name.json#E45649—
support.type.property-name.json punctuation#E45649—
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#3e4b53—
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#3e4b53—
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#3873ca—
support.variable.dom.js, support.variable.dom.ts#E45649—
support.variable.property.dom.js, support.variable.property.dom.ts#E45649—
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#CA1243—
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#4078F2—
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#4078F2—
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#4078F2—
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#E45649—
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#E45649—
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#A626A4—
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#A626A4—
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#4078F2—
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#4078F2—
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#4078F2—
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#BF6EE0—
source.js support.variable, source.ts support.variable, source.tsx support.variable#E45649—
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#BF6EE0—
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#A626A4—
source.ts keyword.operator, source.tsx keyword.operator#3e4b53—
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #4078F2—
constant.language.import-export-all.js, constant.language.import-export-all.ts#E45649—
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#3e4b53—
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#4078F2—
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#E45649—
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#D47500italic
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#D47500italic
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#50A14F—
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#4078F2—
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#50A14F—
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#4078F2—
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#4078F2—
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#4078F2—
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#4078F2—
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#4078F2—
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#C18401—
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#E45649—
constant.language.json#3e4b53—
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#BF6EE0—
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#3e4b53—
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#50A14F—
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#50A14F—
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#A626A4—
source.python constant.other#4078F2—
source.python constant#BF6EE0—
constant.character.format.placeholder.other.python storage#BF6EE0—
support.variable.magic.python#E45649—
meta.function.parameters.python#BF6EE0—
punctuation.separator.annotation.python#4078F2—
punctuation.separator.parameters.python#4078F2—
entity.name.variable.field.cs#E45649—
source.cs keyword.operator#4078F2—
variable.other.readwrite.cs#4078F2—
variable.other.object.cs#4078F2—
variable.other.object.property.cs#4078F2—
entity.name.variable.property.cs#4078F2—
storage.type.cs#C18401—
keyword.other.unsafe.rust#E45649—
markup.raw.block.markdown#4078F2—
punctuation.definition.variable.shell#E45649—
support.constant.property-value.css#4078F2—
punctuation.definition.constant.css#BF6EE0—
punctuation.separator.key-value.scss#E45649—
punctuation.definition.constant.scss#BF6EE0—
meta.property-list.scss punctuation.separator.key-value.scss#4078F2—
storage.type.primitive.array.java#C18401—
entity.name.section.markdown#E45649—
punctuation.definition.heading.markdown#E45649—
markup.heading.setext#4078F2—
punctuation.definition.bold.markdown#BF6EE0—
markup.inline.raw.markdown#50A14F—
beginning.punctuation.definition.list.markdown#E45649—
markup.quote.markdown#A0A1A7italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#4078F2—
punctuation.definition.metadata.markdown#A626A4—
markup.underline.link.markdown, markup.underline.link.image.markdown#A626A4—
string.other.link.title.markdown, string.other.link.description.markdown#4078F2—
punctuation.separator.variable.ruby#E45649—
variable.other.constant.ruby#BF6EE0—
keyword.operator.other.ruby#50A14F—
punctuation.definition.variable.php#E45649—
meta.class.php#4078F2—