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#252525
  • activityBar.border#CFB53B
  • activityBar.foreground#CFB53B
  • activityBarBadge.background#9966ff
  • button.background#9966ff
  • button.foreground#e3e0cd
  • button.hoverBackground#CFB53B
  • editor.background#1d1907
  • editor.foreground#e3e0cd
  • focusBorder#CFB53B
  • gitDecoration.addedResourceForeground#7ad9f5
  • gitDecoration.conflictingResourceForeground#9966ff
  • gitDecoration.deletedResourceForeground#e0115f
  • gitDecoration.modifiedResourceForeground#FFD700
  • gitDecoration.stageModifiedResourceForeground#cd7f32
  • list.activeSelectionBackground#1d1907
  • list.activeSelectionForeground#e3e0cd
  • progressBar.background#CFB53B
  • sideBar.background#1d1907
  • sideBar.border#CFB53B
  • sideBarTitle.foreground#e3e0cd
  • statusBar.background#252525
  • titleBar.activeBackground#252525

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.class.component#56cabe
meta.tag, punctuation.terminator.statement.js#dbdad5
source.vue entity.name.tag#67b180
source.vue entity.other.attribute-name.html#88d1e7
expression.embedded.vue, source.directive.vue#67b180
support.class.builtin.js#56cabe
string.json#8a8a8a
source.json#dbdad5
constant.language.json.comments#9e75f0
meta.tag.xml#dbdad5
entity.name.tag.xml, entity.other.attribute-name.xml, punctuation.definition.tag.xml#dbdad5
entity.name.tag.localname.xml#eb518f
entity.other.attribute-name.localname.xml#88d1e7
meta.tag.metadata.doctype.html, punctuation.definition.entity.html, variable.control.import.include.pug, meta.tag.sgml.doctype.html#c82965
entity.name.tag.html#c82965
entity.other.attribute-name.html, entity.other.attribute-name.tag.pug#88d1e7
text.html.jinja#dbdad5
comment.block.html#8a8a8a
constant.character.entity.named.nbsp.html#c82965
string.quoted.pug#67b180
keyword.other, variable.interpolation.scss, support.constant.media#c82965normal
support.type.vendored.property-name.css#c82965
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#c82965
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#c82965
entity.name.tag#c82965
entity.other.attribute-name.attribute#9e75f0
entity.other.attribute-name.id#b7a553
entity.other.attribute-name.class#56cabe
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#9e75f0
support.type.property-name#88d1e7
support.constant.property-value.css#b37f4cnormal
keyword.other.unit#eb518f
variable.css, variable.argument.css#dbdad5
variable.scss#eb518f
comment.line.scss#8a8a8a
meta.attribute-selector#67b180
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#dbdad5
support.function#e6c619
source.ignore, source.ini#eb518f
comment.line.number-sign.ignore, comment.line.number-sign.ini#c82965
markup.inserted#88d1e7
markup.deleted#eb518f
markup.changed#9e75f0
invalid#8a8a8aunderline italic
invalid.deprecated#c82965underline italic
entity.name.filename#67b180
markup.error#eb518f
markup.underlineunderline
markup.bold#c82965bold
markup.heading#c82965bold
markup.italic#67b180italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#9e75f0
markup.inline.raw, markup.raw.restructuredtext#88d1e7
markup.underline.link, markup.underline.link.image#56cabe
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#56cabe
entity.name.directive.restructuredtext, markup.quote#56cabeitalic
meta.separator.markdown#88d1e7
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#eb518f
punctuation.definition.constant.restructuredtext#9e75f0
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#dbdad5
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#56cabe
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#dbdad5
emphasisitalic
strongbold
header#b7a553
source#dbdad5
meta.diff, meta.diff.header#9e75f0
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#67b180
punctuation.definition.group.capture.regexp#c82965
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#eb518f
constant.character.escape, constant.character.string.escape, constant.regexp#9e75f0
punctuation.definition.character-class.regexp#56cabe
punctuation.definition.group.regexp#b7a553
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#eb518f
meta.assertion.look-ahead.regexp#e6c619
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#56cabe
constant.other.date, constant.other.timestamp#b7a553
variable.other.alias.yaml#e6c619underline 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#c82965
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#c82965
storage.modifier#c82965
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#c82965regular
entity.name.type.class, entity.name.class#56cabenormal
entity.other.inherited-class#56cabeitalic
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#9e75f0italic
variable.object.property, meta.object-literal.key#88d1e7
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#65ce5b
entity.name.function#e6c619
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#b7a553italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#9e75f0italic
meta.decorator variable.other.object#9e75f0
keyword, punctuation.definition.keyword#c82965
keyword.control.new, keyword.operator.new#c82965bold
support#56cabeitalic
support.function, support.type.property-nameregular
support.function.magic, support.variable, variable.other.predefined#9e75f0regular
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#56cabeitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#b7a553
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#dbdad5
comment#8a8a8a
string.quoted.double, string.quoted.single, string.template, punctuation.definition.string#67b180
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#9e75f0
meta.definition.variable, meta.function variable.other.readwrite#dbdad5
constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#dbdad5
variable.other.php#9e75f0
constant, variable.other.constant#9e75f0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#b7a553italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#dbdad5normal
meta.selectionset.graphql variable#67b180
meta.selectionset.graphql meta.arguments variable#b7a553
entity.name.fragment.graphql, variable.fragment.graphql#56cabe
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#dbdad5
source.shell variable.other#dbdad5
meta.scope.prerequisites.makefile#67b180
meta.preprocessor.haskell#9e75f0
Triage theme by Max Miliano - VS Code Theme