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#1eafed
meta.tag, punctuation.terminator.statement.js#fafafa
source.vue entity.name.tag#42b983
source.vue entity.other.attribute-name.html#bf68f6
expression.embedded.vue, source.directive.vue#42b983
support.class.builtin.js#48e0e4
string.json#bbbbbb
source.json#fafafa
constant.language.json.comments#f79071
meta.tag.xml#ff62a5
entity.name.tag.xml, entity.other.attribute-name.xml, punctuation.definition.tag.xml#ff62a5
entity.name.tag.localname.xml#f79071
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#f79071
entity.other.attribute-name.html, entity.other.attribute-name.tag.pug#bf68f6
text.html.jinja#fafafa
comment.block.html#bbbbbb
constant.character.entity.named.nbsp.html#bf68f6
string.quoted.pug#a8df65
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#f79071
entity.other.attribute-name.attribute#1bf5af
entity.other.attribute-name.id#f05454
entity.other.attribute-name.class#1eafed
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#48e0e4
support.type.property-name#bf68f6
support.constant.property-value.css#fdb827normal
keyword.other.unit#c0e218
variable.css, variable.argument.css#1bf5af
variable.scss#f5b5fc
comment.line.scss#bbbbbb
meta.attribute-selector#a8df65
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#fafafa
support.function#fffb97
source.ignore, source.ini#f79071
comment.line.number-sign.ignore, comment.line.number-sign.ini#f05454
markup.inserted#1eafed
markup.deleted#f05454
markup.changed#f79071
invalid#bbbbbbunderline italic
invalid.deprecated#bbbbbbunderline italic
entity.name.filename#a8df65
markup.error#f05454
markup.underlineunderline
markup.bold#fdb827bold
markup.heading#fdb827bold
markup.italic#fffb97italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#1bf5af
markup.inline.raw, markup.raw.restructuredtext#1eafed
markup.underline.link, markup.underline.link.image#1eafed
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#1eafed
entity.name.directive.restructuredtext, markup.quote#1eafeditalic
meta.separator.markdown#1eafed
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ff62a5
punctuation.definition.constant.restructuredtext#f79071
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#1eafed
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fafafa
emphasisitalic
strongbold
header#fdb827
source#fafafa
meta.diff, meta.diff.header#48e0e4
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fffb97
punctuation.definition.group.capture.regexp#f5b5fc
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f05454
constant.character.escape, constant.character.string.escape, constant.regexp#f79071
punctuation.definition.character-class.regexp#48e0e4
punctuation.definition.group.regexp#fdb827
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f05454
meta.assertion.look-ahead.regexp#a8df65
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#48e0e4
constant.other.date, constant.other.timestamp#fdb827
variable.other.alias.yaml#a8df65underline 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#1eafednormal
entity.other.inherited-class#1eafeditalic
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#bf68f6italic
variable.object.property, meta.object-literal.key#bf68f6
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#c0e218
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#fdb827italic
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#48e0e4italic
support.function, support.type.property-nameregular
support.function.magic, support.variable, variable.other.predefined#bf68f6regular
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#48e0e4italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fdb827
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#a8df65
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#bf68f6
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#a06ee1
constant, variable.other.constant#f79071
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fdb827italic
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#fffb97
meta.selectionset.graphql meta.arguments variable#fdb827
entity.name.fragment.graphql, variable.fragment.graphql#48e0e4
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#fffb97
meta.preprocessor.haskell#bf68f6
Triage theme by Max Miliano - VS Code Theme