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.

  • breadcrumb.activeSelectionForeground#eeffff
  • breadcrumb.focusForeground#bfc7d5
  • breadcrumb.foreground#6c739a
  • debugToolBar.background#292D3E
  • editor.background#161515
  • editorError.foreground#EF5350
  • editorLineNumber.activeForeground#eeffff
  • editorMarkerNavigationError.background#EF5350
  • editorMarkerNavigationWarning.background#FFCA28
  • editorWarning.foreground#FFCA28
  • foreground#ffffff
  • gitDecoration.ignoredResourceForeground#69709890
  • selection.background#7580B850
  • sideBar.background#242425
  • sideBarSectionHeader.foreground#eeffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#bfc7d5—
comment#697098italic
string#C3E88D—
string.quoted#CE9178—
string.unquoted#bfc7d5—
support.constant.math#ffcb6b—
constant.numeric, constant.character.numeric#F78C6C—
variable.other.constant, variable.other.enummember#4FC1FF—
constant.character, constant.other#82AAFF—
constant.character.escape#F78C6C—
string.regexp, string.regexp keyword.other#80CBC4—
meta.function punctuation.separator.comma#eeffff—
variable#ffcb6b—
punctuation.accessor, keyword#c792ea—
keyword.other.import.java, meta.import.java, keyword.other.package.java, storage.modifier.java, storage.modifier.extends.java, source.java#569CD6—
punctuation.bracket.angle.java, punctuation.separator.delimiter.java, punctuation.terminator.java#FFF—
storage.type.annotation.java#BBBBBB—
punctuation.definition.annotation.java#fff—
storage.modifier.import.java, meta.import.java, storage.type.annotation.java, keyword.other.import.java—normal
variable.other.object.property.java#4FC1FF—
constant.language.java#DDDCDC—
variable.other.definition.java, meta.method-call.java, variable.parameter.java, meta.method.java, meta.method.body.java#9CDCFE—
storage, storage.type, meta.var.expr storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js#569CD6—
storage, storage.type, storage.type.property.java, variable.other.object.java, meta.class meta.method.declaration meta.var.expr storage.type.java#4EC9B0—
storage.modifier.implements.java#C792EA—
constant.other.key.java#bcbcbc—
entity.name.class, meta.class entity.name.type.class#4EC9B0—
entity.other.inherited-class#4EC9B0—
entity.name.function#82AAFF—
variable.parameter#cfcfcf—
punctuation.definition.tag, meta.tag#adadad—
entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#e04963italic
entity.other.attribute-name#9CDCFE—
entity.name.tag.custom#ffcb6b—
support.function, support.constant#82AAFF—
support.constant.meta.property-value#89DDFF—
support.type, support.class#4EC9B0—
support.variable.dom#ffcb6b—
invalid#ffffff—
invalid.deprecated#ffffff—
keyword.operator#c792ea—
keyword.operator.relational#c792ea—
keyword.operator.assignment#acacac—
comment.line.double-slash, comment.block.java, comment.line.scss#8b8b8b—
entity.other.attribute-name.html#4EC9B0—
text.html.derivative#f0eeee—
object#cdebf7—
constant.language.null#dddcdc—
meta.brace#bfc7d5—
meta.delimiter.period#c792ea—
punctuation.definition.string#d9f5dd—
constant.language.boolean#c792ea—
object.comma#ffffff—
variable.parameter.function#89DDFF—
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#4EC9B0—
meta.property-list entity.name.tag.reference#ff5572—
constant.other.color.rgb-value punctuation.definition.constant#F78C6C—
constant.other.color#FFEB95—
keyword.other.unit#FFEB95—
meta.selector#c792ea—
entity.other.attribute-name.id#FAD430—
meta.property-name#80CBC4—
entity.name.tag.doctype, meta.tag.sgml.doctype#c792eaitalic
punctuation.definition.parameters#d9f5dd—
keyword.control.operator#89DDFF—
keyword.operator.logical#c792ea—
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#ff5572—
variable.other.property, variable.other.object.property#89DDFF—
entity.name.function#DCDCAAitalic
keyword.operator.comparison#bebdbd—
support.constant, keyword.other.special-method, keyword.other.new#89DDFF—
support.function#89DDFF—
invalid.broken#020e14—
invalid.unimplemented#ffffff—
invalid.illegal#ffffff—
variable.language#569CD6—
support.variable.property#89DDFF—
variable.function#82AAFF—
variable.interpolation#ec5f67—
meta.function-call#82AAFF—
punctuation.section.embedded#d3423e—
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#bfc7d5—
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d9f5dd—
string.template meta.template.expression#d3423e—
string.template punctuation.definition.string#bfc7d5—
italic#c792eaitalic
bold#ffcb6bbold
quote#697098italic
raw#80CBC4—
variable.assignment.coffee#89DDFF—
variable.parameter.function.coffee#bfc7d5—
variable.assignment.coffee#89DDFF—
variable.other.readwrite.cs#bfc7d5—
entity.name.type.class.cs, storage.type.cs#82AAFF—
entity.name.type.namespace.cs#B2CCD6—
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#ff5572—
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#ff5572—
keyword.other.unit.css, constant.length.units.css, keyword.other.unit.less, constant.length.units.less, keyword.other.unit.scss, constant.length.units.scss, keyword.other.unit.sass, constant.length.units.sass#FFEB95—
meta.attribute-selector.css entity.other.attribute-name.attribute#F78C6C—
source.js source.css meta.property-list, source.js source.css punctuation.section, source.js source.css punctuation.terminator.rule, source.js source.css punctuation.definition.entity.end.bracket, source.js source.css punctuation.definition.entity.begin.bracket, source.js source.css punctuation.separator.key-value, source.js source.css punctuation.definition.attribute-selector, source.js source.css meta.property-list, source.js source.css meta.property-list punctuation.separator.comma, source.ts source.css punctuation.section, source.ts source.css punctuation.terminator.rule, source.ts source.css punctuation.definition.entity.end.bracket, source.ts source.css punctuation.definition.entity.begin.bracket, source.ts source.css punctuation.separator.key-value, source.ts source.css punctuation.definition.attribute-selector, source.ts source.css meta.property-list, source.ts source.css meta.property-list punctuation.separator.comma#bfc7d5—
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF—
source.elixir entity.name.function#ffcb6b—
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF—
source.elixir punctuation.definition.string#a9c77d—
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#ffcb6b—
source.elixir .punctuation.binary.elixir#c792ea—
source.go meta.function-call.go#DDDDDD—
variable.qraphql#bfc7d5—
entity.other.attribute-name.id.html#ffcb6b—
punctuation.definition.tag.html#89DDFF—
meta.tag.sgml.doctype.html#c792eaitalic
meta.class entity.name.type.class.js#ffcb8b—
meta.method.declaration storage.type.js#82AAFF—
terminator.js#bfc7d5—
meta.js punctuation.definition.js#bfc7d5—
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#eeffff—
variable.other.jsdoc, variable.other.phpdoc#78ccf0—
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#bfc7d5—
variable.parameter.function.js#7986E7—
variable.other.readwrite.js#e0e2bf—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#d1d1d1—
storage.modifier.ts, storage.type.ts, storage.type.class.ts, storage.type.interface.ts#569CD6—
variable.other.object.js, variable.other.object.jsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.object.property.js, variable.object.property.jsx#9CDCFE—
variable.js, variable.other.js#bfc7d5—
variable.js, variable.other.js#bfc7d5—
support.class.js#bfc7d5—
support.type.property-name.json#9CDCFE—
support.constant.json#ffcb6b—
meta.structure.dictionary.value.json string.quoted.double#CE9178—
string.quoted.double.json punctuation.definition.string.json#cb809f—
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874—
variable.other.ruby#bfc7d5—
constant.language.symbol.hashkey.ruby#89DDFF—
entity.name.tag.less#ff5572—
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C—
markup.heading#82b1ff—
markup.italic#c792eaitalic
markup.bold#ffcb6bbold
markup.quote#697098italic
markup.inline.raw#80CBC4—
markup.underline.link, markup.underline.link.image#ff869a—
markup.meta.attribute-list#a9c77d—
markup.admonition—bold
markup.list.bullet#D9F5DD—
markup.superscript, markup.subscript—italic
string.other.link.title.markdown, string.other.link.description.markdown#bfc7d5—
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#82b1ff—
punctuation.definition.metadata.markdown#ff5572—
beginning.punctuation.definition.list.markdown#82b1ff—
entity.name.function.asciidoc#F78C6C—
entity.name.type.interface#4EC9B0—
variable.other.php#bec5d4—
support.class.php#ffcb8b—
meta.function-call.php punctuation#bfc7d5—
variable.other.global.php#ffcb6b—
variable.other.global.php punctuation.definition.variable#ffcb6b—
constant.language.python#ff5874—
variable.parameter.function.python, meta.function-call.arguments.python#7986E7—
meta.function-call.python, meta.function-call.generic.python#B2CCD6—
punctuation.python#bfc7d5—
entity.name.function.decorator.python#ffcb6b—
source.python variable.language.special#8EACE3—
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#DDDDDD—
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF—
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4—
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C—
entity.name.tag.scss, entity.name.tag.sass#ff5572—
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#9CDCFE—
entity.name.type.ts, entity.name.type.tsx#4EC9B0—
support.class.node.ts, support.class.node.tsx#82AAFF—
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#eeffff—
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#bfc7d5—
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#D4D4D4—
meta.tag.js meta.jsx.children.tsx#82AAFF—
entity.name.tag.yaml#89DDFF—
variable.parameter.handlebars#bec5d4—
entity.other.attribute-name.handlebars variable.parameter.handlebars#ffcb6b—
entity.other.attribute-name.handlebars#89DDFF—
entity.other.attribute-value.handlebars variable.parameter.handlebars#7986E7—
meta.tag.js meta.embedded.expression.js punctuation.section.embedded.begin.js, meta.tag.js meta.embedded.expression.js punctuation.section.embedded.end.js, meta.property-list.css meta.property-value.css variable.other.less, punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.section.embedded.js, punctuation.definintion.string, punctuation—italic
keyword.other.unit, support.type.property-name.css, support.type.vendored.property-name.css, support.constant.vendored.property-value.css, meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, meta.export.ts meta.block.ts variable.other.readwrite.alias.ts, meta.export.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.export.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, entity.other.attribute-name, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, constant.other.color.rgb-value.hex.css, constant.other.rgb-value.css, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, punctuation.section.embedded, keyword.operator.type.annotation, variable.object.property.ts, variable.object.property.js, variable.object.property.jsx, variable.object.property.tsx, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, variable.scss, variable.sass, variable.other.less, variable.parameter.url.scss, variable.parameter.url.sass, parameter, string, italic, quote, keyword, storage, language, constant.language, variable.language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, comment—italic