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.background#fdf6e3
  • activityBar.foreground#657b83
  • editor.background#fdf6e3
  • editor.foreground#657b83
  • editor.lineHighlightBackground#eee8d5
  • editor.selectionBackground#eee8d5
  • editorCursor.foreground#93a1a1
  • editorGroup.background#fdf6e3
  • editorGroup.border#eee8d5
  • editorLineNumber.activeForeground#657b83
  • editorLineNumber.foreground#93a1a1
  • sideBar.background#fdf6e3
  • sideBar.foreground#657b83
  • statusBar.background#fdf6e3
  • statusBar.foreground#657b83
  • titleBar.activeBackground#fdf6e3
  • titleBar.activeForeground#657b83

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#93a1a1italic
comment markup.link#93a1a1
entity.name.type#b58900
entity.other.inherited-class#b58900
keyword#859900
keyword.control#859900
keyword.operator#859900
keyword.other.special-method#268bd2
keyword.other.unit#d33682
storage#859900
storage.type.annotation, storage.type.primitive#859900
storage.modifier.package, storage.modifier.import#657b83
constant#d33682
constant.variable#d33682
constant.character.escape#2aa198
constant.numeric#d33682
constant.other.color#2aa198
constant.other.symbol#2aa198
variable#b58900
variable.interpolation#cb4b16
variable.parameter#657b83
string#2aa198
string > source, string embedded#657b83
string.regexp#2aa198
string.regexp source.ruby.embedded#b58900
string.other.link#e06c75
punctuation.definition.comment#93a1a1
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#657b83
punctuation.definition.heading, punctuation.definition.identity#268bd2
punctuation.definition.bold#b58900bold
punctuation.definition.italic#859900italic
punctuation.section.embedded#cb4b16
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#657b83
support.class#b58900
support.type#2aa198
support.function#2aa198
support.function.any-method#268bd2
entity.name.function#268bd2
entity.name.class, entity.name.type.class#b58900
entity.name.section#268bd2
entity.name.tag#e06c75
entity.other.attribute-name#d33682
entity.other.attribute-name.id#268bd2
meta.class#b58900
meta.class.body#657b83
meta.method-call, meta.method#657b83
meta.definition.variable#e06c75
meta.link#d33682
meta.require#268bd2
meta.selector#859900
meta.separator#657b83
meta.tag#657b83
underline
none#657b83
invalid.deprecated#523D14
invalid.illegalwhite
markup.bold#d33682bold
markup.changed#859900
markup.deleted#e06c75
markup.italic#859900italic
markup.heading#e06c75
markup.heading punctuation.definition.heading#268bd2
markup.link#2aa198
markup.inserted#2aa198
markup.quote#d33682
markup.raw#2aa198
source.c keyword.operator#859900
source.cpp keyword.operator#859900
source.cs keyword.operator#859900
source.css property-name, source.css property-value#657b83
source.css property-name.support, source.css property-value.support#657b83
source.elixir source.embedded.source#657b83
source.elixir constant.language, source.elixir constant.numeric, source.elixir constant.definition#268bd2
source.elixir variable.definition, source.elixir variable.anonymous#859900
source.elixir parameter.variable.function#d33682italic
source.elixir quoted#2aa198
source.elixir keyword.special-method, source.elixir embedded.section, source.elixir embedded.source.empty#e06c75
source.elixir readwrite.module punctuation#e06c75
source.elixir regexp.section, source.elixir regexp.string#cb4b16
source.elixir separator, source.elixir keyword.operator#d33682
source.elixir variable.constant#b58900
source.elixir array, source.elixir scope, source.elixir section#657b83
source.gfm markup
source.gfm link entity#268bd2
source.go storage.type.string#859900
source.ini keyword.other.definition.ini#e06c75
source.java storage.modifier.import#b58900
source.java storage.type#b58900
source.java keyword.operator.instanceof#859900
source.java-properties meta.key-pair#e06c75
source.java-properties meta.key-pair > punctuation#657b83
source.js keyword.operator#2aa198
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#859900
source.ts keyword.operator#2aa198
source.flow keyword.operator#2aa198
source.json meta.structure.dictionary.json > string.quoted.json#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#2aa198
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#2aa198
ng.interpolation#e06c75
ng.interpolation.begin, ng.interpolation.end#268bd2
ng.interpolation function#e06c75
ng.interpolation function.begin, ng.interpolation function.end#268bd2
ng.interpolation bool#d33682
ng.interpolation bracket#657b83
ng.pipe, ng.operator#657b83
ng.tag#2aa198
ng.attribute-with-value attribute-name#b58900
ng.attribute-with-value string#859900
ng.attribute-with-value string.begin, ng.attribute-with-value string.end#657b83
source.ruby constant.other.symbol > punctuationinherit
source.php class.bracket#5E81AC
source.python keyword.operator.logical.python#859900
source.python variable.parameter#d33682
customrule#657b83
support.type.property-name#657b83
string.quoted.double punctuation#2aa198
support.constant#d33682
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#2aa198
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#2aa198
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#657b83
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#cb4b16
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#657b83
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#657b83
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#657b83
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#859900
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#859900
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#657b83
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#657b83
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#657b83
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#d33682
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#d33682
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#859900
source.ts keyword.operator, source.tsx keyword.operator#2aa198
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #657b83
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#2aa198
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#657b83
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#d33682
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#2aa198
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#657b83
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#2aa198
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#657b83
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#657b83
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#657b83
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#657b83
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#657b83
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#b58900
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#e06c75
constant.language.json#2aa198
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#d33682
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#2aa198
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#2aa198
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#2aa198
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#859900
variable.other.object.js, variable.other.object.ts#657b83
meta.object-literal.key.js, meta.object-literal.key.ts#e06c75
source.python constant.other#657b83
source.python constant#d33682
constant.character.format.placeholder.other.python storage#d33682
support.variable.magic.python#e06c75
meta.function.parameters.python#d33682
punctuation.separator.annotation.python#657b83
punctuation.separator.parameters.python#657b83
entity.name.variable.field.cs#e06c75
source.cs keyword.operator#657b83
variable.other.readwrite.cs#657b83
variable.other.object.cs#657b83
variable.other.object.property.cs#657b83
entity.name.variable.property.cs#268bd2
storage.type.cs#b58900
keyword.other.unsafe.rust#859900
entity.name.type.rust#2aa198
storage.modifier.lifetime.rust#657b83
entity.name.lifetime.rust#d33682
storage.type.core.rust#2aa198
meta.attribute.rust#d33682
storage.class.std.rust#2aa198
markup.raw.block.markdown#657b83
punctuation.definition.variable.shell#e06c75
support.constant.property-value.css#657b83
punctuation.definition.constant.css#d33682
punctuation.separator.key-value.scss#e06c75
punctuation.definition.constant.scss#d33682
meta.property-list.scss punctuation.separator.key-value.scss#657b83
storage.type.primitive.array.java#b58900
entity.name.section.markdown#e06c75
punctuation.definition.heading.markdown#e06c75
markup.heading.setext#657b83
punctuation.definition.bold.markdown#d33682
markup.inline.raw.markdown#2aa198
beginning.punctuation.definition.list.markdown#e06c75
markup.quote.markdown#93a1a1italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#657b83
punctuation.definition.metadata.markdown#859900
markup.underline.link.markdown, markup.underline.link.image.markdown#859900
string.other.link.title.markdown, string.other.link.description.markdown#268bd2
punctuation.separator.variable.ruby#e06c75
variable.other.constant.ruby#d33682
keyword.operator.other.ruby#2aa198
punctuation.definition.variable.php#FFA07A
meta.class.php#BDAE98