Full workbench mockup using this variant's colors and tokenColors.
Workbench UI color keys from the theme JSON colors map.
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| text, source, variable.other.readwrite, punctuation.definition.variable | #CAD3F5 | — |
| punctuation | #939AB7 | |
| comment, punctuation.definition.comment | #6E738D | italic |
| string, punctuation.definition.string | #A6DA95 | — |
| constant.character.escape | #F5BDE6 | — |
| constant.numeric, variable.other.constant, entity.name.constant, constant.language.boolean, constant.language.false, constant.language.true, keyword.other.unit.user-defined, keyword.other.unit.suffix.floating-point | #F5A97F | — |
| keyword, keyword.operator.word, keyword.operator.new, variable.language.super, support.type.primitive, storage.type, storage.modifier, punctuation.definition.keyword | #C6A0F6 | |
| entity.name.tag.documentation | #C6A0F6 | — |
| keyword.operator, punctuation.accessor, punctuation.definition.generic, meta.function.closure punctuation.section.parameters, punctuation.definition.tag, punctuation.separator.key-value | #8BD5CA | — |
| entity.name.function, meta.function-call.method, support.function, support.function.misc, variable.function | #8AADF4 | italic |
| entity.name.class, entity.other.inherited-class, support.class, meta.function-call.constructor, entity.name.struct | #EED49F | italic |
| entity.name.enum | #EED49F | italic |
| meta.enum variable.other.readwrite, variable.other.enummember | #8BD5CA | — |
| meta.property.object | #8BD5CA | — |
| meta.type, meta.type-alias, support.type, entity.name.type | #EED49F | italic |
| meta.annotation variable.function, meta.annotation variable.annotation.function, meta.annotation punctuation.definition.annotation, meta.decorator, punctuation.decorator | #F5A97F | — |
| variable.parameter, meta.function.parameters | #EE99A0 | italic |
| constant.language, support.function.builtin | #ED8796 | — |
| entity.other.attribute-name.documentation | #ED8796 | — |
| keyword.control.directive, punctuation.definition.directive | #EED49F | — |
| punctuation.definition.typeparameters | #91D7E3 | — |
| entity.name.namespace | #EED49F | — |
| support.type.property-name.css | #8AADF4 | |
| variable.language.this, variable.language.this punctuation.definition.variable | #ED8796 | — |
| variable.object.property | #CAD3F5 | — |
| string.template variable, string variable | #CAD3F5 | — |
| keyword.operator.new | — | bold |
| storage.modifier.specifier.extern.cpp | #C6A0F6 | — |
| entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.cpp, entity.name.scope-resolution.function.definition.cpp | #EED49F | — |
| storage.type.class.doxygen | — | |
| storage.modifier.reference.cpp | #8BD5CA | — |
| meta.interpolation.cs | #CAD3F5 | — |
| comment.block.documentation.cs | #CAD3F5 | — |
| source.css entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css | #EED49F | — |
| punctuation.separator.operator.css | #8BD5CA | — |
| source.css entity.other.attribute-name.pseudo-class | #8BD5CA | — |
| source.css constant.other.unicode-range | #F5A97F | — |
| source.css variable.parameter.url | #A6DA95 | |
| support.type.vendored.property-name | #91D7E3 | — |
| source.css meta.property-value variable, source.css meta.property-value variable.other.less, source.css meta.property-value variable.other.less punctuation.definition.variable.less, meta.definition.variable.scss | #EE99A0 | — |
| source.css meta.property-list variable, meta.property-list variable.other.less, meta.property-list variable.other.less punctuation.definition.variable.less | #8AADF4 | — |
| keyword.other.unit.percentage.css | #F5A97F | — |
| source.css meta.attribute-selector | #A6DA95 | — |
| keyword.other.definition.ini, punctuation.support.type.property-name.json, support.type.property-name.json, punctuation.support.type.property-name.toml, support.type.property-name.toml, entity.name.tag.yaml, punctuation.support.type.property-name.yaml, support.type.property-name.yaml | #8AADF4 | |
| constant.language.json, constant.language.yaml | #F5A97F | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml | #EED49F | |
| support.type.property-name.table, entity.name.section.group-title.ini | #EED49F | — |
| constant.other.time.datetime.offset.toml | #F5BDE6 | — |
| punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml | #F5BDE6 | — |
| entity.other.document.begin.yaml | #F5BDE6 | — |
| markup.changed.diff | #F5A97F | — |
| meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff | #8AADF4 | — |
| markup.inserted.diff | #A6DA95 | — |
| markup.deleted.diff | #ED8796 | — |
| variable.other.env | #8AADF4 | — |
| string.quoted variable.other.env | #CAD3F5 | — |
| support.function.builtin.gdscript | #8AADF4 | — |
| constant.language.gdscript | #F5A97F | — |
| comment meta.annotation.go | #EE99A0 | — |
| comment meta.annotation.parameters.go | #F5A97F | — |
| constant.language.go | #F5A97F | — |
| variable.graphql | #CAD3F5 | — |
| string.unquoted.alias.graphql | #F0C6C6 | — |
| constant.character.enum.graphql | #8BD5CA | — |
| meta.objectvalues.graphql constant.object.key.graphql string.unquoted.graphql | #F0C6C6 | — |
| keyword.other.doctype, meta.tag.sgml.doctype punctuation.definition.tag, meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag | #C6A0F6 | — |
| entity.name.tag | #8AADF4 | |
| text.html constant.character.entity, text.html constant.character.entity punctuation, constant.character.entity.xml, constant.character.entity.xml punctuation, constant.character.entity.js.jsx, constant.charactger.entity.js.jsx punctuation, constant.character.entity.tsx, constant.character.entity.tsx punctuation | #ED8796 | — |
| entity.other.attribute-name | #EED49F | — |
| support.class.component, support.class.component.jsx, support.class.component.tsx, support.class.component.vue | #F5BDE6 | |
| punctuation.definition.annotation, storage.type.annotation | #F5A97F | — |
| constant.other.enum.java | #8BD5CA | — |
| storage.modifier.import.java | #CAD3F5 | — |
| comment.block.javadoc.java keyword.other.documentation.javadoc.java | — | |
| meta.export variable.other.readwrite.js | #EE99A0 | — |
| variable.other.constant.js, variable.other.constant.ts, variable.other.property.js, variable.other.property.ts | #CAD3F5 | — |
| variable.other.jsdoc, comment.block.documentation variable.other | #EE99A0 | |
| storage.type.class.jsdoc | — | |
| support.type.object.console.js | #CAD3F5 | — |
| support.constant.node, support.type.object.module.js | #C6A0F6 | — |
| storage.modifier.implements | #C6A0F6 | — |
| constant.language.null.js, constant.language.null.ts, constant.language.undefined.js, constant.language.undefined.ts, support.type.builtin.ts | #C6A0F6 | — |
| variable.parameter.generic | #EED49F | — |
| keyword.declaration.function.arrow.js, storage.type.function.arrow.ts | #8BD5CA | — |
| punctuation.decorator.ts | #8AADF4 | italic |
| keyword.operator.expression.in.js, keyword.operator.expression.in.ts, keyword.operator.expression.infer.ts, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.is, keyword.operator.expression.keyof.ts, keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.typeof.ts | #C6A0F6 | — |
| support.function.macro.julia | #8BD5CA | italic |
| constant.language.julia | #F5A97F | — |
| constant.other.symbol.julia | #EE99A0 | — |
| text.tex keyword.control.preamble | #8BD5CA | — |
| text.tex support.function.be | #91D7E3 | — |
| constant.other.general.math.tex | #F0C6C6 | — |
| comment.line.double-dash.documentation.lua storage.type.annotation.lua | #C6A0F6 | |
| comment.line.double-dash.documentation.lua entity.name.variable.lua, comment.line.double-dash.documentation.lua variable.lua | #CAD3F5 | — |
| heading.1.markdown punctuation.definition.heading.markdown, heading.1.markdown, heading.1.quarto punctuation.definition.heading.quarto, heading.1.quarto, markup.heading.atx.1.mdx, markup.heading.atx.1.mdx punctuation.definition.heading.mdx, markup.heading.setext.1.markdown, markup.heading.heading-0.asciidoc | #ED8796 | — |
| heading.2.markdown punctuation.definition.heading.markdown, heading.2.markdown, heading.2.quarto punctuation.definition.heading.quarto, heading.2.quarto, markup.heading.atx.2.mdx, markup.heading.atx.2.mdx punctuation.definition.heading.mdx, markup.heading.setext.2.markdown, markup.heading.heading-1.asciidoc | #F5A97F | — |
| heading.3.markdown punctuation.definition.heading.markdown, heading.3.markdown, heading.3.quarto punctuation.definition.heading.quarto, heading.3.quarto, markup.heading.atx.3.mdx, markup.heading.atx.3.mdx punctuation.definition.heading.mdx, markup.heading.heading-2.asciidoc | #EED49F | — |
| heading.4.markdown punctuation.definition.heading.markdown, heading.4.markdown, heading.4.quarto punctuation.definition.heading.quarto, heading.4.quarto, markup.heading.atx.4.mdx, markup.heading.atx.4.mdx punctuation.definition.heading.mdx, markup.heading.heading-3.asciidoc | #A6DA95 | — |
| heading.5.markdown punctuation.definition.heading.markdown, heading.5.markdown, heading.5.quarto punctuation.definition.heading.quarto, heading.5.quarto, markup.heading.atx.5.mdx, markup.heading.atx.5.mdx punctuation.definition.heading.mdx, markup.heading.heading-4.asciidoc | #8AADF4 | — |
| heading.6.markdown punctuation.definition.heading.markdown, heading.6.markdown, heading.6.quarto punctuation.definition.heading.quarto, heading.6.quarto, markup.heading.atx.6.mdx, markup.heading.atx.6.mdx punctuation.definition.heading.mdx, markup.heading.heading-5.asciidoc | #C6A0F6 | — |
| markup.bold | #ED8796 | bold |
| markup.italic | #ED8796 | italic |
| markup.strikethrough | #A5ADCB | strikethrough |
| punctuation.definition.link, markup.underline.link | #8AADF4 | — |
| text.html.markdown punctuation.definition.link.title, text.html.quarto punctuation.definition.link.title, string.other.link.title.markdown, string.other.link.title.quarto, markup.link, punctuation.definition.constant.markdown, punctuation.definition.constant.quarto, constant.other.reference.link.markdown, constant.other.reference.link.quarto, markup.substitution.attribute-reference | #B7BDF8 | — |
| punctuation.definition.raw.markdown, punctuation.definition.raw.quarto, markup.inline.raw.string.markdown, markup.inline.raw.string.quarto, markup.raw.block.markdown, markup.raw.block.quarto | #A6DA95 | — |
| fenced_code.block.language | #91D7E3 | — |
| markup.fenced_code.block punctuation.definition, markup.raw support.asciidoc | #939AB7 | — |
| markup.quote, punctuation.definition.quote.begin | #F5BDE6 | — |
| meta.separator.markdown | #8BD5CA | — |
| punctuation.definition.list.begin.markdown, punctuation.definition.list.begin.quarto, markup.list.bullet | #8BD5CA | — |
| markup.heading.quarto | — | bold |
| entity.other.attribute-name.multipart.nix, entity.other.attribute-name.single.nix | #8AADF4 | — |
| variable.parameter.name.nix | #CAD3F5 | |
| meta.embedded variable.parameter.name.nix | #B7BDF8 | |
| string.unquoted.path.nix | #F5BDE6 | |
| support.attribute.builtin, meta.attribute.php | #EED49F | — |
| meta.function.parameters.php punctuation.definition.variable.php | #EE99A0 | — |
| constant.language.php | #C6A0F6 | — |
| text.html.php support.function | #91D7E3 | — |
| keyword.other.phpdoc.php | — | |
| support.variable.magic.python, meta.function-call.arguments.python | #CAD3F5 | — |
| support.function.magic.python | #91D7E3 | italic |
| variable.parameter.function.language.special.self.python, variable.language.special.self.python | #ED8796 | italic |
| keyword.control.flow.python, keyword.operator.logical.python | #C6A0F6 | — |
| storage.type.function.python | #C6A0F6 | — |
| support.token.decorator.python, meta.function.decorator.identifier.python | #91D7E3 | — |
| meta.function-call.python | #8AADF4 | — |
| entity.name.function.decorator.python, punctuation.definition.decorator.python | #F5A97F | italic |
| constant.character.format.placeholder.other.python | #F5BDE6 | — |
| support.type.exception.python, support.function.builtin.python | #F5A97F | — |
| support.type.python | #F5A97F | — |
| constant.language.python | #C6A0F6 | — |
| meta.indexed-name.python, meta.item-access.python | #EE99A0 | italic |
| storage.type.string.python | #A6DA95 | italic |
| meta.function.parameters.python | — | |
| string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end | #F5BDE6 | — |
| keyword.control.anchor.regexp | #C6A0F6 | — |
| string.regexp.ts | #CAD3F5 | — |
| punctuation.definition.group.regexp, keyword.other.back-reference.regexp | #A6DA95 | — |
| punctuation.definition.character-class.regexp | #EED49F | — |
| constant.other.character-class.regexp | #F5BDE6 | — |
| constant.other.character-class.range.regexp | #F4DBD6 | — |
| keyword.operator.quantifier.regexp | #8BD5CA | — |
| constant.character.numeric.regexp | #F5A97F | — |
| punctuation.definition.group.no-capture.regexp, meta.assertion.look-ahead.regexp, meta.assertion.negative-look-ahead.regexp | #8AADF4 | — |
| meta.annotation.rust, meta.annotation.rust punctuation, meta.attribute.rust, punctuation.definition.attribute.rust | #EED49F | italic |
| meta.attribute.rust string.quoted.double.rust, meta.attribute.rust string.quoted.single.char.rust | — | |
| entity.name.function.macro.rules.rust, storage.type.module.rust, storage.modifier.rust, storage.type.struct.rust, storage.type.enum.rust, storage.type.trait.rust, storage.type.union.rust, storage.type.impl.rust, storage.type.rust, storage.type.function.rust, storage.type.type.rust | #C6A0F6 | |
| entity.name.type.numeric.rust | #C6A0F6 | |
| meta.generic.rust | #F5A97F | — |
| entity.name.impl.rust | #EED49F | italic |
| entity.name.module.rust | #F5A97F | — |
| entity.name.trait.rust | #EED49F | italic |
| storage.type.source.rust | #EED49F | — |
| entity.name.union.rust | #EED49F | — |
| meta.enum.rust storage.type.source.rust | #8BD5CA | — |
| support.macro.rust, meta.macro.rust support.function.rust, entity.name.function.macro.rust | #8AADF4 | italic |
| storage.modifier.lifetime.rust, entity.name.type.lifetime | #8AADF4 | italic |
| string.quoted.double.rust constant.other.placeholder.rust | #F5BDE6 | — |
| meta.function.return-type.rust meta.generic.rust storage.type.rust | #CAD3F5 | — |
| meta.function.call.rust | #8AADF4 | — |
| punctuation.brackets.angle.rust | #91D7E3 | — |
| constant.other.caps.rust | #F5A97F | — |
| meta.function.definition.rust variable.other.rust | #EE99A0 | — |
| meta.function.call.rust variable.other.rust | #CAD3F5 | — |
| variable.language.self.rust | #ED8796 | — |
| variable.other.metavariable.name.rust, meta.macro.metavariable.rust keyword.operator.macro.dollar.rust | #F5BDE6 | — |
| comment.line.shebang, comment.line.shebang punctuation.definition.comment, comment.line.shebang, punctuation.definition.comment.shebang.shell, meta.shebang.shell | #F5BDE6 | italic |
| comment.line.shebang constant.language | #8BD5CA | italic |
| meta.function-call.arguments.shell punctuation.definition.variable.shell, meta.function-call.arguments.shell punctuation.section.interpolation, meta.function-call.arguments.shell punctuation.definition.variable.shell, meta.function-call.arguments.shell punctuation.section.interpolation | #ED8796 | — |
| meta.string meta.interpolation.parameter.shell variable.other.readwrite | #F5A97F | italic |
| source.shell punctuation.section.interpolation, punctuation.definition.evaluation.backticks.shell | #8BD5CA | — |
| entity.name.tag.heredoc.shell | #C6A0F6 | — |
| string.quoted.double.shell variable.other.normal.shell | #CAD3F5 | — |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
TypeScript sample highlighted with this variant's colors and tokenColors.
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}!`;
}