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.activeBorder#00ff00
  • activityBar.background#111111
  • activityBarBadge.background#007acc
  • editor.background#000000
  • editor.foreground#ffffff
  • editor.selectionBackground#222222
  • editor.selectionHighlightBackground#ffffff15
  • editor.wordHighlightStrongBackground#ffffff15
  • editorGroupHeader.tabsBackground#222222
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#2d2d2d
  • editorLineNumber.activeForeground#00ff00
  • sideBar.background#222222
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#21252b
  • statusBar.foreground#9da5b4
  • tab.activeBackground#555555
  • tab.hoverBackground#555555
  • tab.inactiveBackground#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.other.color#ffffff
comment, punctuation.definition.comment#7f817eitalic
constant.character, constant.escape, constant.numeric, constant.other.character-class.range.regexp, support.constant#ffffff
constant.character.escape#ffffaa
constant.language, constant.language.null, constant.language.undefined#2492ff
constant.other#ffb46a
constant.other.color#ffffff
constant.other.key, constant.other.symbol#c3e88d
entity.name#ffcb6b
entity.name.function#0aff04
entity.other.attribute-name#c792ea
entity.other.inherited-class#ffb46a
invalid, invalid.illegal#ff5370
keyword#2492ff
keyword.control#0b93ff
keyword.operator#2492ff
keyword.operator.assignment#ff6106
keyword.other.special-method#0aff04
keyword.other, keyword.other.substitution, keyword.other.template, keyword.other.unit#ffffff
meta.function-call#0aff04
meta.object-literal.key#00ff00italic
meta.tag, meta.tag.other.html#ffffff
punctuation#ffffff
punctuation.definition.tag, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.html#2492ff
punctuation.section.embedded, punctuation.section.embedded.begin, punctuation.section.embedded.end#e10000
storage, storage.type, storage.modifier#2492ff
string.other.link#f07178
string, string.quoted.double, string.quoted.single#ffb46a
string.regexp#ffe4a6
string.regexp keyword.other#ff0000
support.class#ffcb6b
support.function#0aff04
support.other.namespace#ffcb6b
support.other, support.other.variable#f07178
support.type#ff1190
support.type.sys-types#ffcb6b
entity.name.tag, invalid.illegal.unrecognized-tag, meta.tag.sgml#2492ff
variable, variable.other.constant, string constant.other.placeholder#2bb71d
variable.function#0aff04
variable.language#2492ff
variable.other#2bb71ditalic
variable.other.object#ff8d04
variable.other.object.property#b8d9ff
variable.other.property#a5a8ff
variable.parameter#2bb71ditalic
*url*, *link*, *uri*underline
source.json meta.structure.dictionary.json support.type.property-name.json#c792ea
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff1190
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#22ff31
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#dd8d04
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#147dff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff5a60
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#18fffa
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#acff04
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f50aff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fffa02
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff0c77
source.json string.quoted.double.json.comments#ffc266
constant.other.reference.link.markdown#ffcb6b
text.html.markdown fenced_code.block.language.markdown#ff026aitalic
markdown.heading#c3e88d
text.html.markdown markup.heading.markdown entity.name.section.markdown#ff25d9underline
text.html.markdown markup.heading.markdown punctuation.definition.heading.markdown#2492ff
text.html.markdown markup.heading.setext#ff8d04
text.html.markdown markup.inline.raw.markdown#c792ea
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737e
text.html.markdown markup.underline.link.image.markdown#82aaffitalic
text.html.markdown meta.attribute.align.html invalid#ff0000italic
text.html.markdown meta.link.inline.markdown markup.underline.link.markdown#2bb71ditalic
meta.separator#65737ebold
text.html.markdown, punctuation.definition.list_item.markdown#eeffff
punctuation.definition.fenced.markdown#00000050
text.html.markdown punctuation.definition.link.description.begin.markdown#ff0000
punctuation.section.class.end#eeffff
text.html.markdown string.other.link.description.markdown#ffff00
string.other.link.description.title.markdown#c792ea
string.other.link.title.markdown#82aaff
variable.language.fenced.markdown#65737e
markup.bold, markup.bold string#f07178bold
markup.bold markup.italic string, markup.bold markup.italic, markup.italic markup.bold string, markup.italic markup.bold, markup.quote markup.bold string, markup.quote markup.bold#f07178bold
markup.changed#c792ea
markup.changed.git_gutter#ffcb6b
markup.deleted#ff5370
markup.deleted.git_gutter#e10000
markup.heading#ffb46a
markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#c3e88d
markup.inserted#c3e88d
markup.inserted.git_gutter#ffb46a
markup.italic#f07178italic
markup.raw.block.fenced.markdown#eeffff
markup.underline#f78c6cunderline
markup.quote punctuation.definition.blockquote.markdown#65737e
markup.quoteitalic
markup.raw.block#c792ea
markup.table#eeffff
source.ini, source.shell#ffb46a
source.ini keyword.other.definition.ini#2bb71ditalic
source.ini punctuation.separator.key-value.ini#ff6106
source.shell keyword.control#0b93ff
constant.character.entity.named.amp.html, constant.character.entity.named.bull.html, constant.character.entity.named.copy.html, constant.character.entity.named.euro.html, constant.character.entity.named.hellip.html, constant.character.entity.named.ndash.html, constant.character.entity.named.quot.html, constant.character.entity.named.reg.html, constant.character.entity.named.yen.html, constant.character.entity.numeric.decimal.html#ff1190
entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, text.html.basic entity.other.attribute-name.html#00d205
entity.other.attribute-name.id.html#00d205
invalid.illegal.character-not-allowed-here.html#f50aff
source.css.scss keyword.control.at-rule.extend.scss punctuation.definition.keyword.scss, source.css.scss meta.at-rule.for.scss keyword.control.for.scss punctuation.definition.keyword.scss, source.css.scss meta.at-rule.supports.scss keyword.control.at-rule.supports.scss punctuation.definition.keyword.scss#b8d9ff
source.css.scss constant.numeric.css keyword.other.unit.deg.css, source.css.scss constant.numeric.css keyword.other.unit.s.css#2492ff
source.css entity.name.tag, source.scss entity.name.tag#ffffff
source.css.scss entity.name.tag.css#f8f8f8
source.css.scss entity.name.tag.reference.scss#b8d9ff
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity#b2ff02
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#00d205
source.css.scss entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css#fe71e7
source.sass keyword.control#00d205
keyword.control.warn.scss#ff0000
keyword.operator.css, keyword.operator.logical.scss#0b93ff
keyword.other.important#e10000italic
source.css.scss meta.at-rule.keyframes.scss, source.css.scss meta.at-rule.keyframes.scss entity.other.attribute-name.scss#ffffff
source.css meta.at-rule.charset.css keyword.control.at-rule.charset.css punctuation.definition#0b93ff
string.quoted.single.css, string.quoted.single.scss#2bb71ditalic
support.constant.property-value.css#46f761
support.function.misc.css, support.function.misc.scss, support.function.transform.css, support.function.url.css#ff8d04
source.css support.type.property-name, source.css.scss support.type.vendored.property-name.css, source.less support.type.property-name, source.postcss support.type.property-name, source.postcss support.type.property-name, source.sass support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.stylus support.type.property-name#ff1190
variable.scss#ff25d9
source.js constant.other.object.key.js string.unquoted.label.js#ff5370italic
entity.name.method.js#82aaffitalic
meta.class-method.js entity.name.function.js, meta.var.expr.js entity.name, new.expr.js entity.name.type.js#df00df
source.js keyword.control#2492ff
keyword.other.debugger.js, keyword.other.debugger.ts#ff0000underline
meta.class-method.js entity.name.function.js#df00df
string.template.js#ffb46a
meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#ff0000
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff5370
support.class.console.js#ff0000underline
support.constant.math.js#df00df
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ff0000italic
variable.function.constructor#df00df
source.vue source.js variable.other.readwrite.js#2bb71ditalic
source.vue expression.embedded.vue variable.other.readwrite.js#fec6ff
source.vue source.js meta.import.js meta.block.js variable.other.readwrite.alias.js#00ff00italic
source.vue meta.import punctuation.definition.block, source.ts meta.import punctuation.definition.block, source.tsx meta.import punctuation.definition.block#f50aff
source.vue source.js meta.export.default.js meta.objectliteral.js meta.method.declaration.js meta.block.js meta.objectliteral.js meta.object.member.js meta.object-literal.key.js#00ff00italic
source.vue meta.object-literal.key meta.brace.square, source.ts meta.object-literal.key meta.brace.square#ffffff
source.vue meta.object-literal.key meta.template.expression punctuation.definition, source.ts meta.object-literal.key meta.template.expression punctuation.definition#ff25d9
source.vue punctuation.attribute-shorthand.bind.html.vue, source.vue punctuation.attribute-shorthand.event.html.vue#ffff00
source.vue punctuation.definition.block.tag.jsdoc#b8d9ff
source.vue punctuation.definition.generic#ff07a2italic
source.vue punctuation.separator.key-value.html#ffff00
source.vue punctuation.definition.template-expression.begin.js, source.vue punctuation.definition.template-expression.end.js#ffffff
source.vue variable.other.jsdoc#3a771f
source.vue variable.other.readwrite.js#ff1190
source.ts string.quoted.double.ts, source.tsx string.quoted.double.tsx#ffb46a
source.ts entity.name.type.instance.jsdoc, source.tsx entity.name.type.instance.jsdoc#8f0b51
source.vue source.ts entity.name.type.module.ts#ffff00
source.ts keyword.operator.expression.keyof.ts, source.tsx keyword.operator.expression.keyof.tsx#276aff
source.ts entity.name.type.alias.ts, source.ts entity.name.type.interface.ts, source.ts entity.name.type.ts, source.ts meta.interface.ts entity.other.inherited-class.ts, source.tsx meta.class.ts entity.name.type.class.ts, source.tsx entity.name.type.alias.tsx, source.tsx entity.name.type.interface.tsx, source.tsx entity.name.type.tsx, source.tsx meta.interface.tsx entity.other.inherited-class.tsx, source.tsx meta.class.tsx entity.name.type.class.tsx#f50aff
source.ts meta.interface.ts entity.other.inherited-class.ts, source.tsx meta.interface.tsx entity.other.inherited-class.tsxitalic
source.ts meta.type.declaration string.quoted.double.ts, source.tsx meta.type.declaration string.quoted.double.tsx#2bb71ditalic
source.ts support.type.builtin.ts, source.ts support.type.primitive.ts, source.tsx support.type.builtin.tsx, source.tsx support.type.primitive.tsx, source.vue source.ts meta.var.expr.ts support.type.builtin.ts, source.vue source.ts meta.var.expr.ts support.type.primitive.ts#ff1190
source.ts punctuation.definition.typeparameters.begin.ts, source.ts punctuation.definition.typeparameters.end.ts, source.tsx punctuation.definition.typeparameters.begin.tsx, source.tsx punctuation.definition.typeparameters.end.tsx#2492ff
source.tsx support.class.component.tsx#2492ff
source.tsx entity.other.attribute-name.tsx#00D205
source.dart support.class.dart#ff25d9
text.html.django constant.other.filter.django#ffffff
text.html.django constant.other.tag.name.django#0b93ff
text.html.django entity.other.django.delimiter.tag#ffffff
text.html.django entity.tag.tagbraces.django#ffffff
text.html.django keyword.control.django, text.html.django keyword.control.tag-name.django#0b93ff
text.html.django keyword.operator.assignment.django#0b93ff
text.html.django meta.scope.django.tag variable.other.django#2bb71ditalic
text.html.django meta.scope.django.variable entity.other.django.delimiter.variable#ff07a2italic
text.html.django storage.type.templatetag.django constant.other.contrib.django#2bb71ditalic
text.html.django storage.type.variable.django entity.tag.tagbraces.django#ff07a2italic
text.html.django storage.type.variable.django string.unquoted.tag-string.django#ffffff
text.html.django string.quoted.double.django, text.html.django string.quoted.double.html, text.html.django string.quoted.single.django, text.html.django string.quoted.single.html#ffb46a
text.html.django string.quoted.double.html storage.type.variable.django string.unquoted.tag-string.django#2bb71ditalic
text.html.django string.unquoted.tag-string.django#2bb71ditalic
constant.other.character-class.range.regexp#ffffffitalic
source.python entity.name.section.group.regexp, source.python entity.name.tag.named.group.regexp#ff1190italic
source.python keyword.other.python#ff0000
source.python meta.class.python entity.name.type.class.python#0aff04
source.python meta.function-call.arguments.python, source.python meta.item-access.python, source.python meta.structure.dictionary.value.python#2bb71ditalic
source.python meta.function.decorator.python entity.name.function.decorator.python support.function.builtin.python, source.python meta.function.decorator.python entity.name.function.decorator.python#ea03ffitalic
source.python meta.function.decorator.python entity.name.function.decorator.python punctuation.definition.decorator.python#4e5affitalic
source.python meta.function.python meta.function.parameters.python#0b93ff
source.python meta.function.python storage.type.function.python#0b93ff
source.python meta.structure.dictionary.python meta.structure.dictionary.value.python meta.function-call.python#ff92e4
source.python punctuation.definition.arguments.begin.python, source.python punctuation.definition.arguments.end.python, source.python punctuation.definition.dictionary.begin.python, source.python punctuation.definition.dictionary.end.python, source.python punctuation.definition.list.begin.python, source.python punctuation.definition.list.end.python, source.python punctuation.separator.valuepair.dictionary.python#ffffff
punctuation.definition.character-class.regexp#ffffffitalic
source.python#2bb71ditalic
source.python string.quoted.docstring.multi.python#7f817eitalic
source.python string.quoted.double.block.python#7f817eitalic
string.quoted.single.single-line.raw-regex.python meta.group.regexp#ffffffitalic
string.quoted.single.single-line.raw-regex.python meta.group.regexp#ffffffitalic
text.html.php constant.language.php#0b93ff
text.html.php constant.other.php#bbfd0d
text.html.php entity.name.type.class.php#df00df
text.html.php entity.other.inherited-class.php#80fcff
text.html.php keyword.control.die.php, text.html.php keyword.control.else.php, text.html.php keyword.control.exit.php, text.html.php keyword.control.foreach.php, text.html.php keyword.control.if.php, text.html.php keyword.control.return.php#0b93ff
text.html.php keyword.operator.class.php#ea03ff
text.html.php keyword.operator.key.php, text.html.php keyword.operator.logical.php, text.html.php keyword.operator.ternary.php#2492ff
text.html.php keyword.operator.comparison.php#48ffc2
text.html.php keyword.other.phpdoc.php#3a771fitalic
text.html.php keyword.other.type.php#aaaaaaitalic
text.html.php meta.function.php variable.other.php#2bb71d
text.html.php meta.method-call.php variable.other.php#2bb71d
meta.use.php#ffcb6b
punctuation.definition.string.begin.php, punctuation.definition.string.end.php#ffffff
text.html.php punctuation.definition.variable.php#ff25d9
text.html.php punctuation.section.embedded.begin.php, text.html.php punctuation.section.embedded.end.php#e10000
punctuation.separator.inheritance.php, text.html.php punctuation.separator.inheritance.php#ffffff
text.html.php storage.modifier.extends.php, text.html.php storage.modifier.php#276aff
text.html.php storage.type.php#2492ff
text.html.php string.quoted.double.php, text.html.php string.quoted.double.sql.php#ff6f5b
text.html.php string.quoted.single#fef611
string.regexp.double-quoted.php punctuation.definition.string.begin.php, string.regexp.double-quoted.php punctuation.definition.string.end.php, string.regexp.single-quoted.php punctuation.definition.string.begin.php, string.regexp.single-quoted.php punctuation.definition.string.end.php#ff0000
text.html.php support.class.php#aaaaaaitalic
text.html.php support.constant.std.php#bbfd0d
text.html.php support.function.file.php, text.html.php support.function.json.php#e8e8e8italic
text.html.php support.function.magic.php#e3a0ff
support.other.namespace.php, support.other.namespace.use.php#ffcb6b
text.html.php variable.other.php#d285cc
text.html.php variable.other.global.php, text.html.php variable.other.global.safer.php#ff4028italic
text.html.php variable.other.property.php#d285cc
text.html.php constant.other.database-name.sql, text.html.php constant.other.table-name.sql#ffa851italic
text.html.php keyword.operator.comparison.sql#48ffc2
text.html.php keyword.other.DDL.create.II.sql, text.html.php keyword.other.DML.sql, text.html.php keyword.other.alias.sql, text.html.php keyword.other.sql#ff026a
text.html.php support.function.aggregate.sql, text.html.php support.function.expression.sql#d4facd

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...