Premium VS Code dark theme collection - Special Edition featuring 25 meticulously crafted themes. From cyberpunk to cosmic designs, each theme delivers enhanced syntax highlighting and optimal contrast for reduced eye strain. Perfect for professional developers and long coding sessions.
Full workbench mockup using this variant's colors and tokenColors.
Loading...
Workbench UI color keys from the theme JSON colors map.
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #D7E4FF46 | italic |
| variable, string constant.other.placeholder | #A4B1CD | — |
| string constant.other.placeholder | #C5D1EB | — |
| constant.other.color | #FFFFFF | — |
| invalid, invalid.illegal | #FF8484 | — |
| keyword, storage.type, storage.modifier | #FF8484 | — |
| constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution | #5CECC6 | — |
| keyword.control | #CF8DFB | — |
| markup.deleted.git_gutter | #C5D1EB | — |
| entity.name.tag, meta.tag.sgml | #FF8484 | — |
| markup.deleted.git_gutter | #C5D1EB | — |
| entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method | #FFCC5C | — |
| meta.block variable.other | #C5D1EB | — |
| support.other.variable | #FF8484 | — |
| string.other.link | #FF8484 | — |
| constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other | #5CB2FF | — |
| string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js | #C5F467 | — |
| entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types | #FF8484 | — |
| entity.name, entity.other.inherited-class | #ffffff | — |
| entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types | #FF8484 | — |
| support.type | #A4B1CD | — |
| source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name | #A4B1CD | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #FF8484 | — |
| variable.language | #FF8484 | italic |
| entity.name.method.js | #5CB2FF | italic |
| meta.class-method.js entity.name.function.js, variable.function.constructor | #FF8484 | — |
| entity.other.attribute-name | #5CB2FF | — |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #FFCC5C | italic |
| entity.other.attribute-name.class | #5CB2FF | — |
| source.sass keyword.control | #5CB2FF | — |
| markup.inserted | #C5F467 | — |
| markup.deleted | #FF8484 | — |
| markup.changed | #CF8DFB | — |
| string.regexp | #5CB2FF | — |
| constant.character.escape | #5CB2FF | — |
| *url*, *link*, *uri* | — | underline |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #5CB2FF | italic |
| source.js constant.other.object.key.js string.unquoted.label.js | #FF8484 | italic |
| source.json meta.structure.dictionary.json support.type.property-name.json | #CF8DFB | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #5CB2FF | — |
| 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 | #5CB2FF | — |
| 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 | #FF8484 | — |
| 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 | #FF68B3 | — |
| 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 | #5CB2FF | — |
| 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 | #FF8484 | — |
| 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 | #CF8DFB | — |
| 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 | #C5F467 | — |
| text.html.markdown, punctuation.definition.list_item.markdown | #A4B1CD | — |
| text.html.markdown markup.inline.raw.markdown | #CF8DFB | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #313F55 | — |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #C5F467 | — |
| markup.italic | #FF8484 | italic |
| markup.bold, markup.bold string | #ff009d | — |
| markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string | #FF8484 | bold |
| markup.underline | #FF8484 | underline |
| markup.quote punctuation.definition.blockquote.markdown | #1A2332 | — |
| markup.quote | — | italic |
| string.other.link.title.markdown | #5CB2FF | — |
| string.other.link.description.title.markdown | #CF8DFB | — |
| constant.other.reference.link.markdown | #5CB2FF | — |
| markup.raw.block | #CF8DFB | — |
| markup.raw.block.fenced.markdown | #00000050 | — |
| punctuation.definition.fenced.markdown | #00000050 | — |
| markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end | #A4B1CD | — |
| variable.language.fenced.markdown | #313F55 | — |
| meta.separator | #313F55 | bold |
| markup.table | #A4B1CD | — |
| token.info-token | #5CB2FF | — |
| token.warn-token | #FFCC5C | — |
| token.error-token | #FF8484 | — |
| token.debug-token | #CF8DFB | — |
Full workbench mockup using this variant's colors and tokenColors.
Loading...
Workbench UI color keys from the theme JSON colors map.
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| support.module.elm, entity.other.inherited-class.python, variable.other.object, support.other.namespace.php, entity.other.attribute-name.namespace.xml, record.accessor, entity.name.record.field.accessor, storage.modifier.import.java, storage.modifier.import.groovy, meta.import.swift entity.name.type.swift, meta.member.access.python, variable.other.property.ts, variable.other.property.js, constant.language.symbol.elixir, punctuation.tag.liquid support.class.liquid, meta.scriptblock.powershell meta.group.simple.subexpression.powershell meta.group.simple.subexpression.powershell meta.scriptblock.powershell meta.scriptblock.powershell support.variable.automatic.powershell punctuation.definition.variable.powershell, meta.scriptblock.powershell meta.group.simple.subexpression.powershell meta.group.simple.subexpression.powershell meta.scriptblock.powershell meta.scriptblock.powershell support.variable.automatic.powershell, source.cpp meta.block.class.cpp meta.body.class.cpp, source.cpp meta.block.class.cpp meta.body.class.cpp meta.function.definition.special.constructor.cpp meta.body.function.definition.special.constructor.cpp | #FF955C | — |
| entity.name.type | #A4EF58 | — |
| comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source | #c5bae159 | italic |
| constant, support.constant.core.php | #E35535 | — |
| meta.section.struct.go variable.other.field.go, meta.section.struct.go variable.other.declaration.go, source, support, constant.character.entity.named, meta.jsx.children, source.lua, text.html.derivative, source.graphql meta.selections variable.other.alias.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql variable.graphql, source.graphql variable.arguments.graphql, JSXNested | #ada2c5 | — |
| entity.name.function.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.decorator, meta.decorator variable.other.readwrite.ts, variable.parameter.gdscript, entity.name.variable.parameter, variable.parameter | #F38CEC | — |
| keyword.control.export, support.type.object.module | #EACD61 | — |
| support.function, entity.name.function, meta.function-call, meta.function, meta.method.declaration, meta.function-call support, variable.language.super.ts, source.directive, meta.function-call.generic, meta.method-call.static.php, meta.method-call.php, meta.class storage.type, meta.method.groovy, meta.bracket.square.access, entity.name.function-call.elixir, punctuation.output.liquid support.variable.liquid, meta.function.echo.edge source.js keyword.operator.error-control.js, entity.name.type.variant.gdscript, entity.name.function.powershell | #69C3FF | — |
| keyword.control.import, meta.module.name.elm support, meta.import.elm support, keyword.control.at-rule, punctuation.definition.keyword, variable.control.import.include, keyword.other.import.java | #EACD61 | — |
| keyword.package.go, keyword.operator.pointer.go, keyword.control, keyword.control.conditional, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.begin.blade, keyword.end.blade, keyword.blade, keyword.type-alias, keyword.type, support.class.console, keyword.other.await, storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, keyword.other.new, keyword.other.phpdoc, keyword.other.use.php, keyword.operator.logical.python, keyword.other.import.static.groovy, keyword.other.import.groovy, punctuation.definition.attribute.swift, source.svelte meta.scope.tag.main.svelte meta.tag.start.svelte variable.function.svelte, meta.directive.on.svelte entity.name.type.svelte, keyword.other.special-method.elixir, keyword.edge, entity.name.function.edge, support.constant.edge, keyword.other.gdscript, keyword.other.onready.gdscript, source.graphql meta.fragment.graphql keyword.on.graphql, source.graphql meta.type.interface.graphql keyword.implements.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql meta.type.list.graphql keyword.operator.nulltype.graphql, source.graphql meta.variables.graphql keyword.operator.nulltype.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql keyword.operator.nulltype.graphql, keyword.operator.class.php, keyword.operator.spread.php, keyword.operator.type.php, keyword.operator.increment-decrement.php, keyword.operator.increment-increment.php, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, keyword.operator.string.php, keyword.operator.ternary.php, keyword.operator.variadic.php, keyword.operator.nullable-type.php, keyword.other.use-as.php, keyword.import.go, keyword.operator.address.go, keyword.operator.null-coalescing, keyword.operator.arrow, keyword.struct.go, keyword.operator.liquid, keyword.operator.optional.ts, keyword.cmake, keyword.codetag.notation | #EACD61 | — |
| meta.object-literal.key, variable.object.property | #c8c1d9 | — |
| keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml | #EACD61 | — |
| keyword.operator.comparison, storage.type.function.arrow, keyword.operator.lua, keyword.operator.assignment, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.math | #EACD61 | — |
| punctuation, attribute_value, meta.brace, punctuation.definition.parameters, punctuation.definition.template-expression, keyword.operator, keyword.other, punctuation.terminator, punctuation.separator, punctuation.definition.generic.begin, punctuation.definition.generic.end, meta.function.type-declaration, keyword.other.colon.elm, meta.record.field.elm keyword.other.elm, keyword.other.period.elm, meta.tag.xml, meta.tag.preprocessor.xml, punctuation.definition.block, punctuation.accessor, constant.name.attribute.tag.pug, string.interpolated.pug, keyword.other.whitespace.liquid, meta.tag.template.block.twig, meta.tag.template.value.twig, begin.bracket, end.bracket, text.html.twig meta.tag.inline.any, text.html.twig meta.tag.block.any, support.function.construct.begin.blade, support.function.construct.end.blade source.php, support.function.construct.end.blade, meta.function.echo.blade source.php, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, text.html.vue-html meta.tag.block.any, keyword.operator.assignment.tsx, meta.definition.method.signature.java, meta.class.body.groovy, meta.definition.method.groovy meta.method.body.java meta.declaration.assertion.groovy, punctuation.definition.list.begin.erlang, meta.expression.parenthesized, meta.definition.function.swift meta.parameter-clause.swift, source.swift meta.function-call.swift, punctuation.section.embedded.end.swift source.swift, source.lua, meta.function.lua, punctuation.definition.keyword.svelte, source.svelte meta.scope.tag.SpeakerPicture.svelte meta.tag.start.svelte entity.other.attribute-name.svelte, expression.embbeded.vue punctuation.definition.tag.begin.html.vue, expression.embbeded.vue punctuation.definition.tag.end.html.vue, source.graphql meta.type.interface.graphql meta.type.object.graphql meta.type.list.graphql meta.brace.square.graphql, punctuation.output.liquid, text.html.liquid meta.tag.liquid punctuation.definition.tag.end.liquid, JSXAttrs keyword.operator.assignment.jsx, meta.tag.attributes.js keyword.operator.assignment.js | #c8c1d960 | — |
| entity.name.package.go, variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.this.php punctuation.definition.variable.php, meta.class.body.php storage.type.php, variable.parameter.function.swift entity.name.function.swift, variable.other.jsdoc, support.variable.drive.powershell, entity.other.attribute.lua | #FF955C | — |
| storage, meta.var.expr storage.type, storage.type.function, keyword.function, storage.type.class, storage.type.property, keyword.other, keyword.local.lua, entity.name.class, meta.function.lua keyword.control.lua, storage.type.enum, storage.type.interface, storage.type.type, entity.name.type.class.java, support.class.php, entity.other.inherited-class.php, entity.name.type.class.groovy, storage.type.rust, entity.name.type.class.swift, source.svelte meta.script.svelte source.ts entity.name.label.ts, meta.directive.on.svelte keyword.control.svelte, storage.type.const.gdscript, storage.type.var.gdscript, source.graphql declaration.meta.type keyword, source.graphql meta.type.interface.graphql keyword.type.graphql, source.graphql keyword.schema.graphql, source.graphql keyword.operation.graphql, source.graphql meta.enum.graphql keyword.enum.graphql, source.graphql meta.fragment.graphql keyword.fragment.graphql, storage.type.trait.php, keyword.type.go, keyword.var.go, storage.type.powershell, keyword.const.go, keyword.storage.modifier | #22ECDB | — |
| string, string.template, string.quoted.single, punctuation.definition.string, punctuation.definition.string.template, punctuation.definition.string.begin, punctuation.definition.string.end.html source.js-ignored-vscode, punctuation.definition.string.end.html source.js, punctuation.definition.string.end.html.vue, punctuation.definition.string.end.html source.ts, punctuation.definition.string.end.html source.tsx, punctuation.definition.string.end.html source.js.jsx, punctuation.definition.string.end, string.other.link, constant.character.escape.regexp, variable.parameter.url, constant.other.symbol.quoted.single.erlang, constant.other.symbol.quoted.single.erlang punctuation.definition.symbol.begin.erlang, constant.other.symbol.quoted.single.erlang punctuation.definition.symbol.end.erlang, meta.import.ts punctuation.definition.variable.svelte, punctuation.definition.string.end.html source.css-ignored-vscode, text.html.edge punctuation.definition.variable.js, string.unquoted.plain.out.yaml, string.quoted.single.python punctuation.definition.string.begin.python, string.quoted.single.python punctuation.definition.string.end.python, punctuation.definition.string.end.html source.css, string.quoted.double.html source.css | #3CEC85 | — |
| string.quoted.docstring.multi.python, string.quoted.double.block.python punctuation.definition.string.end.python, string.quoted.double.block.python punctuation.definition.string.begin.python, string.quoted.double.block.python, punctuation.definition.string.begin.python, punctuation.definition.string.end.python | #3CEC8560 | — |
| entity.name.type, support.type, support.class, storage.type, entity.other.inherited-class, keyword.type, storage.type.java, storage.type.primitive.java, storage.type.generic.java, keyword.other.type, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php source.php, punctuation.section.embedded.end.php, storage.type.object.array.java, storage.type.primitive.groovy, storage.type.groovy, meta.definition.type.body.swift meta.function-call.swift, meta.definition.type.class.swift meta.inheritance-clause.swift, variable.other.constant.elixir, source.graphql declaration.meta.type support, source.graphql meta.selections, source.graphql meta.enum.graphql meta.type.object.graphql constant.character.enum.graphql, source.graphql meta.fragment.graphql entity.name.fragment.graphql, entity.name.type.class.php, support.class.php, entity.other.inherited-class.php, entity.other.alias.php, meta.group.simple.subexpression.powershell meta.scriptblock.powershell storage.type.powershell | #B78AFF | — |
| variable, variable.language, entity.name.type.class.js, entity.name.variable, support.variable.magic, meta.method.body, entity.name.variable, punctuation.definition.variable, meta.class variable.object.property, variable.other.constant entity.name.function, entity.name.variable.tuple-element.cs punctuation.separator.colon.cs, meta.definition.variable.name.groovy, meta.body.struct.cpp, parameter.variable.function.elixir, meta.directive.edge source.js, meta.function.echo.edge source.js, text.html.edge meta.function.echo.edge meta.function-call.js, source.css variable.parameter.keyframe-list.css, source.css meta.property-value.css, source.css.scss meta.at-rule.keyframes.scss entity.name.function.scss, source.css.scss meta.property-value.scss, entity.name.variable.tuple-element, meta.group.simple.subexpression.powershell support.variable.automatic.powershell, support.variable.automatic.powershell, storage.source.cmake, entity.source.cmake | #FF738A | — |
| source.elm constant.type-constructor | #FF738A | — |
| source.elm storage.type | #B78AFF | — |
| entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html | #B78AFF | — |
| source.diff meta.diff.header.to-file, source.diff markup.inserted.diff, source.diff punctuation.definition.to-file.diff, source.diff punctuation.definition.inserted.diff | #3CEC85 | — |
| source.diff punctuation.definition.from-file.diff, source.diff meta.diff.header.from-file, source.diff markup.deleted.diff, source.diff punctuation.definition.deleted.diff | #E35535 | — |
| source.diff meta.diff.header.command | #69C3FF | — |
| source.diff punctuation.definition.range.diff, source.diff meta.diff.range.unified | #FF955C | — |
| support.variable.liquid, support.class.liquid | #FF738A | — |
| text.html.basic entity.name, source.js-ignored-vscode, entity.name.tag, meta.embedded.block.blade constant.other.php, meta.embedded.block.blade keyword.operator.comparison.php, meta.embedded.block.blade keyword.operator.arithmetic.php, meta.tag.start.svelte keyword.control.svelte, meta.tag.end.svelte keyword.control.svelte | #69C3FF | — |
| meta.tag.sgml.doctype.html, punctuation.definition.tag, meta.tag.block.any, meta.tag.block.any.html, meta.tag.inline.any, source.css-ignored-vscode, meta.tag.metadata.style.end.html, text.html.vue invalid.illegal.character-not-allowed-here.html, meta.tag.inline.i.start.html, meta.tag.structure.div.start.html, punctuation.definition.tag.end.html.vue, invalid.illegal.character-not-allowed-here.html | #69C3FFaa | — |
| entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php | #EACD61 | — |
| markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown | #B78AFF | — |
| fenced_code.block.language | #B78AFF | — |
| punctuation.definition.list.begin | #69C3FF | — |
| punctuation.definition.list.begin | #69C3FF | — |
| entity.name.section, markup.heading.setext | #EACD61 | — |
| punctuation.definition.heading | #EACD61 | — |
| markup.underline.link, markup.underline.link.image | #69C3FF | — |
| markup.bold, punctuation.definition.bold | #FF738A | bold |
| markup.strikethrough, punctuation.definition.strikethrough | #E35535 | — |
| markup.italic, punctuation.definition.italic | #FF955C | italic |
| markup.quote, markup.quote.markdown punctuation.definition.quote.begin | #F38CEC | — |
| punctuation.definition.quote.begin | #69C3FF | — |
| meta.embedded.block.frontmatter punctuation.definition.tag.begin, meta.embedded.block.frontmatter punctuation.definition.tag.end, meta.embedded.block.frontmatter string.unquoted.plain.out | #52456f | italic |
| entity.other.attribute-name.pseudo-class | #F38CEC | — |
| entity.other.attribute-name.pseudo-element | #F38CEC | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity | #22ECDB | — |
| entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity | #22ECDB | — |
| support.type.property-name.css, support.type.vendored.property-name, meta.property-list entity.name.tag.css, meta.property-list.scss meta.property-list.scss entity.name.tag.css, meta.property-list meta.property-name, source.css.scss meta.property-list.scss entity.name.tag.css | #c8c1d9 | — |
| source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity | #B78AFF | — |
| entity.name.tag.reference, meta.property-list | #FF955C | — |
| keyword.other.unit | #FF955C | — |
| support.constant.property-value, support.constant.font-name, meta.property-value.css, meta.attribute.style.html | #FF955C | — |
| constant.numeric | #FF955C | — |
| entity.name.tag.css, meta.property-list.scss entity.name.tag.css | #69C3FF | — |
Full workbench mockup using this variant's colors and tokenColors.
Loading...
Workbench UI color keys from the theme JSON colors map.
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #E5E0F5 | — |
| comment, markup.quote.markdown, meta.diff, meta.diff.header | #706C82cc | — |
| meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown | #E5E0F5 | — |
| variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name | #34E7E4 | — |
| markup.bold, constant.numeric, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js | #F1C40F | — |
| markup.list, text.xml string, entity.name.type, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string | #FFE26E | — |
| markup.heading, variable.language.this.js, variable.language.special.self.python | #FF80BF | — |
| punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag | #FF80BF | — |
| storage, keyword, meta.link, meta.image, markup.italic, source.js support.type | #E056FD | — |
| string.regexp, markup.changed | #34E7E4 | — |
| constant, support.class, keyword.operator, support.constant, text.html.markdown string, source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted | #FF4A85 | — |
| string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string | #2ED573 | — |
| entity.other.inherited-class | — | underline |
Full workbench mockup using this variant's colors and tokenColors.
Loading...
Workbench UI color keys from the theme JSON colors map.
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.quoted.docstring | #7a88cf | — |
| variable, support.variable, string constant.other.placeholder, text.html | #c8d3f5 | — |
| support.variable.dom, support.constant.math, support.type.object.module, support.variable.object.process, support.constant.json | #ffc777 | — |
| constant.language.undefined, constant.language.null | #7f85a3 | — |
| constant.other.php | #ffc777 | — |
| constant.other.color | #ffffff | — |
| invalid, invalid.illegal | #ff5370 | — |
| invalid.deprecated | #c099ff | — |
| keyword, storage.type, storage.modifier, keyword.other.important | #c099ff | — |
| keyword.control, storage | — | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #86e1fc | — |
| keyword.operator.spread, keyword.operator.rest | #ff757f | bold |
| keyword.operator, keyword.control, punctuation, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.block.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.property-list, meta.brace.square, keyword.other.template, keyword.other.substitution | #86e1fc | — |
| keyword.control | — | — |
| entity.name.tag, meta.tag, markup.deleted.git_gutter | #ff757f | — |
| entity.name.function, variable.function, keyword.other.special-method | #82aaff | — |
| support.function, meta.function-call entity.name.function | #65bcff | — |
| source.cpp meta.block variable.other | #ff757f | — |
| support.other.variable, string.other.link | #ff757f | — |
| variable.other.constant, constant.language, keyword.other.type.php, storage.type.php, support.constant, constant.character, constant.escape, keyword.other.unit | #ff98a4 | — |
| constant.numeric, constant.language.boolean, constant.language.json, constant.language.infinity, constant.language.nan | #ff966c | — |
| variable.parameter.function.language.special, variable.parameter, meta.function.parameter variable | #fca7ea | — |
| string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.attribute-selector | #c3e88d | |
| variable.other.object | #ffc777 | — |
| meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.field.declaration.ts variable.object.property, variable.object.property | #4fd6be | — |
| meta.object.member, variable.other.object.property | #a9b8e8 | — |
| variable.other.property, support.variable.property, support.variable.property.dom | #a9b8e8 | — |
| source.haskell constant.other.haskell | #ff98a4 | — |
| source.haskell meta.import.haskell entity.name.namespace | #c8d3f5 | — |
| source.haskell storage.type, source.c storage.type, source.java storage.type | #ffc777 | — |
| storage.type.function | #c099ff | — |
| entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types | #ffc777 | — |
| support.type | #ff966c | — |
| source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name | #82aaff | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #ff757f | — |
| variable.language | #ff757f | — |
| entity.name.method.js | #82aaff | — |
| meta.class-method.js entity.name.function.js, variable.function.constructor | #82aaff | — |
| entity.other.attribute-name | #c099ff | — |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #ffc777 | — |
| meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype entity.other.attribute-name | #c099ff | — |
| entity.other.attribute-name.class | #ffc777 | — |
| source.sass keyword.control | #82aaff | — |
| entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #4fd6be | — |
| support.constant.property-value | #fca7ea | — |
| markup.inserted | #c3e88d | — |
| markup.deleted | #ff757f | — |
| markup.changed | #c099ff | — |
| string.regexp | #b4f9f8 | — |
| punctuation.definition.group | #ff757f | — |
| constant.other.character-class.regexp, keyword.control.anchor.regexp | #c099ff | — |
| constant.other.character-class.set.regexp | #ffc777 | — |
| keyword.operator.quantifier.regexp | #fca7ea | — |
| constant.character.escape | #86e1fc | — |
| *url*, *link*, *uri* | — | underline |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #82aaff | — |
| keyword.other.unit | #fc7b7b | — |
| source.js constant.other.object.key.js string.unquoted.label.js | #ff757f | — |
| source.json meta.structure.dictionary.json support.type.property-name.json | #82aaff | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #65bcff | — |
| 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 | #ff757f | — |
| 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 | #fca7ea | — |
| 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 | #ffc777 | — |
| 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 | #4fd6be | — |
| 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 | #82aaff | — |
| punctuation.definition.list_item.markdown | #828bb8 | — |
| meta.block, meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.section.function | #b4c2f0 | — |
| meta.jsx.children, meta.embedded.block | #b4c2f0 | — |
| text.html.markdown markup.inline.raw.markdown | #c099ff | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #86e1fc | — |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #86e1fc | — |
| markup.italic | #ff757f | italic |
| markup.bold, markup.bold string | #ff757f | bold |
| markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string | #ff757f | bold |
| markup.underline | #ff966c | underline |
| markup.quote punctuation.definition.blockquote.markdown | #86e1fc | — |
| markup.quote | — | italic |
| string.other.link.title.markdown | #82aaff | — |
| string.other.link.description.title.markdown | #c099ff | — |
| constant.other.reference.link.markdown | #ffc777 | — |
| markup.raw.block | #c099ff | — |
| markup.fenced_code.block.markdown, markup.inline.raw.string.markdown | #86e1fc | — |
| variable.language.fenced.markdown | #86e1fc | — |
| meta.separator | #86e1fc | bold |
| markup.table | #828bb8 | — |
| token.info-token | #65bcff | — |
| token.warn-token | #ffc777 | — |
| token.error-token | #ff757f | — |
| token.debug-token | #c099ff | — |
export interface User {
id: string;
name: string;
role: "admin" | "member";
tags: string[];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser(id: string): Promise<User | null> {
if (!id) {
return null;
}
const response = await fetch(`/api/users/${id}`, {
method: "GET",
headers: { Accept: "application/json" },
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return (await response.json()) as User;
}
function greet(user: User): string {
// Simple greeting function that uses the user's name
return `Hello, ${user.name}!`;
}
export interface User {
id: string;
name: string;
role: "admin" | "member";
tags: string[];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser(id: string): Promise<User | null> {
if (!id) {
return null;
}
const response = await fetch(`/api/users/${id}`, {
method: "GET",
headers: { Accept: "application/json" },
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return (await response.json()) as User;
}
function greet(user: User): string {
// Simple greeting function that uses the user's name
return `Hello, ${user.name}!`;
}
export interface User {
id: string;
name: string;
role: "admin" | "member";
tags: string[];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser(id: string): Promise<User | null> {
if (!id) {
return null;
}
const response = await fetch(`/api/users/${id}`, {
method: "GET",
headers: { Accept: "application/json" },
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return (await response.json()) as User;
}
function greet(user: User): string {
// Simple greeting function that uses the user's name
return `Hello, ${user.name}!`;
}
export interface User {
id: string;
name: string;
role: "admin" | "member";
tags: string[];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser(id: string): Promise<User | null> {
if (!id) {
return null;
}
const response = await fetch(`/api/users/${id}`, {
method: "GET",
headers: { Accept: "application/json" },
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return (await response.json()) as User;
}
function greet(user: User): string {
// Simple greeting function that uses the user's name
return `Hello, ${user.name}!`;
}