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#231f1f
  • 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#12b4f9
meta.tag, punctuation.terminator.statement.js#faf9f9
source.vue entity.name.tag#35c684
source.vue entity.other.attribute-name.html#c160fe
expression.embedded.vue, source.directive.vue#35c684
support.class.builtin.js#3deaee
string.json#c2b4b4
source.json#faf9f9
constant.language.json.comments#fe8c69
meta.tag.xml#ff62a5
entity.name.tag.xml, entity.other.attribute-name.xml, punctuation.definition.tag.xml#ff62a5
entity.name.tag.localname.xml#fe8c69
entity.other.attribute-name.localname.xml#ff62a5
meta.tag.metadata.doctype.html, punctuation.definition.entity.html, variable.control.import.include.pug, meta.tag.sgml.doctype.html#ff62a5
entity.name.tag.html#fe8c69
entity.other.attribute-name.html, entity.other.attribute-name.tag.pug#c160fe
text.html.jinja#faf9f9
comment.block.html#c2b4b4
constant.character.entity.named.nbsp.html#c160fe
string.quoted.pug#a9e85c
keyword.other, variable.interpolation.scss, support.constant.media#ff62a5normal
support.type.vendored.property-name.css#ff62a5
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#ff62a5
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#ff62a5
entity.name.tag#fe8c69
entity.other.attribute-name.attribute#11ffb3
entity.other.attribute-name.id#f94b4b
entity.other.attribute-name.class#12b4f9
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#3deaee
support.type.property-name#c160fe
support.constant.property-value.css#ffb925normal
keyword.other.unit#c8ee0b
variable.css, variable.argument.css#11ffb3
variable.scss#f7b2ff
comment.line.scss#c2b4b4
meta.attribute-selector#a9e85c
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#faf9f9
support.function#fffb97
source.ignore, source.ini#fe8c69
comment.line.number-sign.ignore, comment.line.number-sign.ini#f94b4b
markup.inserted#12b4f9
markup.deleted#f94b4b
markup.changed#fe8c69
invalid#c2b4b4underline italic
invalid.deprecated#c2b4b4underline italic
entity.name.filename#a9e85c
markup.error#f94b4b
markup.underlineunderline
markup.bold#ffb925bold
markup.heading#ffb925bold
markup.italic#fffb97italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#11ffb3
markup.inline.raw, markup.raw.restructuredtext#12b4f9
markup.underline.link, markup.underline.link.image#12b4f9
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#12b4f9
entity.name.directive.restructuredtext, markup.quote#12b4f9italic
meta.separator.markdown#12b4f9
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ff62a5
punctuation.definition.constant.restructuredtext#fe8c69
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#faf9f9
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#12b4f9
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#faf9f9
emphasisitalic
strongbold
header#ffb925
source#faf9f9
meta.diff, meta.diff.header#3deaee
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fffb97
punctuation.definition.group.capture.regexp#f7b2ff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f94b4b
constant.character.escape, constant.character.string.escape, constant.regexp#fe8c69
punctuation.definition.character-class.regexp#3deaee
punctuation.definition.group.regexp#ffb925
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f94b4b
meta.assertion.look-ahead.regexp#a9e85c
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#3deaee
constant.other.date, constant.other.timestamp#ffb925
variable.other.alias.yaml#a9e85cunderline 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#ff62a5
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#ff62a5
storage.modifier#ff62a5
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff62a5regular
entity.name.type.class, entity.name.class#12b4f9normal
entity.other.inherited-class#12b4f9italic
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#c160feitalic
variable.object.property, meta.object-literal.key#c160fe
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#c8ee0b
entity.name.function#fffb97
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#ffb925italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#fffb97italic
meta.decorator variable.other.object#fffb97
keyword, punctuation.definition.keyword#ff62a5
keyword.control.new, keyword.operator.new#ff62a5bold
support#3deaeeitalic
support.function, support.type.property-nameregular
support.function.magic, support.variable, variable.other.predefined#c160feregular
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#3deaeeitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffb925
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#faf9f9
comment#c2b4b4
string.quoted.double, string.quoted.single, string.template, punctuation.definition.string#a9e85c
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#c160fe
meta.definition.variable, meta.function variable.other.readwrite#faf9f9
constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#faf9f9
variable.other.php#9f65ea
constant, variable.other.constant#fe8c69
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffb925italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#faf9f9normal
meta.selectionset.graphql variable#fffb97
meta.selectionset.graphql meta.arguments variable#ffb925
entity.name.fragment.graphql, variable.fragment.graphql#3deaee
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#faf9f9
source.shell variable.other#faf9f9
meta.scope.prerequisites.makefile#fffb97
meta.preprocessor.haskell#c160fe