Skip to main content
CodingTheme

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#bcd68d73
  • 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
  • input.background#e8dfc48a
  • input.foreground#657b83
  • menu.background#f6f4ec
  • menu.foreground#657b83
  • menu.selectionBackground#bcd68d73
  • 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
  • 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

Shiki preview

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

Loading...

Relax Eyes Theme by liwei - VS Code Theme