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.foreground#f05454
  • activityBarBadge.background#f05454
  • button.background#f79071
  • button.foreground#fafafa
  • button.hoverBackground#f05454
  • editor.background#212121
  • editor.foreground#fafafa
  • focusBorder#f05454
  • list.activeSelectionBackground#3f0606
  • list.activeSelectionForeground#fafafa
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#f05454

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.class.component#36a5d5
meta.tag, punctuation.terminator.statement.js#fafafa
source.vue entity.name.tag#5ba081
source.vue entity.other.attribute-name.html#bb78e6
expression.embedded.vue, source.directive.vue#5ba081
support.class.builtin.js#5dcccf
string.json#bbbbbb
source.json#fafafa
constant.language.json.comments#e89880
meta.tag.xml#ef72a7
entity.name.tag.xml, entity.other.attribute-name.xml, punctuation.definition.tag.xml#ef72a7
entity.name.tag.localname.xml#e89880
entity.other.attribute-name.localname.xml#ef72a7
meta.tag.metadata.doctype.html, punctuation.definition.entity.html, variable.control.import.include.pug, meta.tag.sgml.doctype.html#ef72a7
entity.name.tag.html#e89880
entity.other.attribute-name.html, entity.other.attribute-name.tag.pug#bb78e6
text.html.jinja#fafafa
comment.block.html#bbbbbb
constant.character.entity.named.nbsp.html#bb78e6
string.quoted.pug#a6cc78
keyword.other, variable.interpolation.scss, support.constant.media#ef72a7normal
support.type.vendored.property-name.css#ef72a7
meta.selector, meta.property-list.css, meta.at-rule.media.header, meta.definition.variable.css, punctuation.separator.list.comma.css, punctuation.separator.key-value.css, entity.other.keyframe-offset.css#ef72a7
meta.selector, meta.property-list.scss, meta.at-rule.media.header, meta.definition.variable.scss, punctuation.separator.list.comma.scss, punctuation.separator.key-value.scss, entity.other.keyframe-offset.scss#ef72a7
entity.name.tag#e89880
entity.other.attribute-name.attribute#33dda6
entity.other.attribute-name.id#dd6767
entity.other.attribute-name.class#36a5d5
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#5dcccf
support.type.property-name#bb78e6
support.constant.property-value.css#e7b03dnormal
keyword.other.unit#afc931
variable.css, variable.argument.css#33dda6
variable.scss#efbdf4
comment.line.scss#bbbbbb
meta.attribute-selector#a6cc78
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#fafafa
support.function#f5f1a1
source.ignore, source.ini#e89880
comment.line.number-sign.ignore, comment.line.number-sign.ini#dd6767
markup.inserted#36a5d5
markup.deleted#dd6767
markup.changed#e89880
invalid#bbbbbbunderline italic
invalid.deprecated#bbbbbbunderline italic
entity.name.filename#a6cc78
markup.error#dd6767
markup.underlineunderline
markup.bold#e7b03dbold
markup.heading#e7b03dbold
markup.italic#f5f1a1italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#33dda6
markup.inline.raw, markup.raw.restructuredtext#36a5d5
markup.underline.link, markup.underline.link.image#36a5d5
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#36a5d5
entity.name.directive.restructuredtext, markup.quote#36a5d5italic
meta.separator.markdown#36a5d5
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ef72a7
punctuation.definition.constant.restructuredtext#e89880
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#fafafa
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#36a5d5
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fafafa
emphasisitalic
strongbold
header#e7b03d
source#fafafa
meta.diff, meta.diff.header#5dcccf
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f5f1a1
punctuation.definition.group.capture.regexp#efbdf4
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#dd6767
constant.character.escape, constant.character.string.escape, constant.regexp#e89880
punctuation.definition.character-class.regexp#5dcccf
punctuation.definition.group.regexp#e7b03d
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#dd6767
meta.assertion.look-ahead.regexp#a6cc78
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#5dcccf
constant.other.date, constant.other.timestamp#e7b03d
variable.other.alias.yaml#a6cc78underline italic
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#ef72a7
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#ef72a7
storage.modifier#ef72a7
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ef72a7regular
entity.name.type.class, entity.name.class#36a5d5normal
entity.other.inherited-class#36a5d5italic
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#bb78e6italic
variable.object.property, meta.object-literal.key#bb78e6
entity.name.function.member, meta.tag.attributes, meta.function-call.generic, meta.function-call.object, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#afc931
entity.name.function#f5f1a1
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.function.parameter.no-default.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#e7b03ditalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#f5f1a1italic
meta.decorator variable.other.object#f5f1a1
keyword, punctuation.definition.keyword#ef72a7
keyword.control.new, keyword.operator.new#ef72a7bold
support#5dcccfitalic
support.function, support.type.property-nameregular
support.function.magic, support.variable, variable.other.predefined#bb78e6regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#5dcccfitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e7b03d
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#fafafa
comment#bbbbbb
string.quoted.double, string.quoted.single, string.template, punctuation.definition.string#a6cc78
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#bb78e6
meta.definition.variable, meta.function variable.other.readwrite#fafafa
constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#fafafa
variable.other.php#a27fcf
constant, variable.other.constant#e89880
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e7b03ditalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#fafafanormal
meta.selectionset.graphql variable#f5f1a1
meta.selectionset.graphql meta.arguments variable#e7b03d
entity.name.fragment.graphql, variable.fragment.graphql#5dcccf
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#fafafa
source.shell variable.other#fafafa
meta.scope.prerequisites.makefile#f5f1a1
meta.preprocessor.haskell#bb78e6