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#40e0d0
meta.tag, punctuation.terminator.statement.js#e3e0cd
source.vue entity.name.tag#50c878
source.vue entity.other.attribute-name.html#7ad9f5
expression.embedded.vue, source.directive.vue#50c878
support.class.builtin.js#40e0d0
string.json#888c8d
source.json#e3e0cd
constant.language.json.comments#9966ff
meta.tag.xml#e3e0cd
entity.name.tag.xml, entity.other.attribute-name.xml, punctuation.definition.tag.xml#e3e0cd
entity.name.tag.localname.xml#fe3e8b
entity.other.attribute-name.localname.xml#7ad9f5
meta.tag.metadata.doctype.html, punctuation.definition.entity.html, variable.control.import.include.pug, meta.tag.sgml.doctype.html#e0115f
entity.name.tag.html#e0115f
entity.other.attribute-name.html, entity.other.attribute-name.tag.pug#7ad9f5
text.html.jinja#e3e0cd
comment.block.html#888c8d
constant.character.entity.named.nbsp.html#e0115f
string.quoted.pug#50c878
keyword.other, variable.interpolation.scss, support.constant.media#e0115fnormal
support.type.vendored.property-name.css#e0115f
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#e0115f
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#e0115f
entity.name.tag#e0115f
entity.other.attribute-name.attribute#9966ff
entity.other.attribute-name.id#CFB53B
entity.other.attribute-name.class#40e0d0
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#9966ff
support.type.property-name#7ad9f5
support.constant.property-value.css#cd7f32normal
keyword.other.unit#fe3e8b
variable.css, variable.argument.css#e3e0cd
variable.scss#fe3e8b
comment.line.scss#888c8d
meta.attribute-selector#50c878
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#e3e0cd
support.function#FFD700
source.ignore, source.ini#fe3e8b
comment.line.number-sign.ignore, comment.line.number-sign.ini#e0115f
markup.inserted#7ad9f5
markup.deleted#fe3e8b
markup.changed#9966ff
invalid#888c8dunderline italic
invalid.deprecated#e0115funderline italic
entity.name.filename#50c878
markup.error#fe3e8b
markup.underlineunderline
markup.bold#e0115fbold
markup.heading#e0115fbold
markup.italic#50c878italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#9966ff
markup.inline.raw, markup.raw.restructuredtext#7ad9f5
markup.underline.link, markup.underline.link.image#40e0d0
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#40e0d0
entity.name.directive.restructuredtext, markup.quote#40e0d0italic
meta.separator.markdown#7ad9f5
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#fe3e8b
punctuation.definition.constant.restructuredtext#9966ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#e3e0cd
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#40e0d0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e3e0cd
emphasisitalic
strongbold
header#CFB53B
source#e3e0cd
meta.diff, meta.diff.header#9966ff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#50c878
punctuation.definition.group.capture.regexp#e0115f
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#fe3e8b
constant.character.escape, constant.character.string.escape, constant.regexp#9966ff
punctuation.definition.character-class.regexp#40e0d0
punctuation.definition.group.regexp#CFB53B
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#fe3e8b
meta.assertion.look-ahead.regexp#FFD700
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#40e0d0
constant.other.date, constant.other.timestamp#CFB53B
variable.other.alias.yaml#FFD700underline 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#e0115f
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#e0115f
storage.modifier#e0115f
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#e0115fregular
entity.name.type.class, entity.name.class#40e0d0normal
entity.other.inherited-class#40e0d0italic
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#9966ffitalic
variable.object.property, meta.object-literal.key#7ad9f5
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#54e346
entity.name.function#FFD700
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#CFB53Bitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#9966ffitalic
meta.decorator variable.other.object#9966ff
keyword, punctuation.definition.keyword#e0115f
keyword.control.new, keyword.operator.new#e0115fbold
support#40e0d0italic
support.function, support.type.property-nameregular
support.function.magic, support.variable, variable.other.predefined#9966ffregular
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#40e0d0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#CFB53B
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#e3e0cd
comment#888c8d
string.quoted.double, string.quoted.single, string.template, punctuation.definition.string#50c878
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#9966ff
meta.definition.variable, meta.function variable.other.readwrite#e3e0cd
constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#e3e0cd
variable.other.php#9966ff
constant, variable.other.constant#9966ff
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#CFB53Bitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#e3e0cdnormal
meta.selectionset.graphql variable#50c878
meta.selectionset.graphql meta.arguments variable#CFB53B
entity.name.fragment.graphql, variable.fragment.graphql#40e0d0
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#e3e0cd
source.shell variable.other#e3e0cd
meta.scope.prerequisites.makefile#50c878
meta.preprocessor.haskell#9966ff
Triage theme by Max Miliano - VS Code Theme