One adaptive theme system — 27 WCAG-verified variants, live gallery, workspace fingerprint & day/night auto switch. VS Code, Cursor, Windsurf & web. Finance, audit, SOC, DevOps.
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 |
|---|---|---|
| punctuation.bracket, punctuation.parenthesis, punctuation.curlybrace, punctuation.squarebracket | #1f2b33 | — |
| constant, constant.other, support.constant | #a855f7 | — |
| constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #a855f7 | — |
| constant.language, constant.language.boolean, constant.language.null | #a855f7 | italic |
| storage.modifier.async, storage.modifier.const, storage.modifier.static | #ae8951 | italic |
| meta.decorator, meta.decorator.python, punctuation.decorator | #f97316 | italic |
| keyword.control.await, keyword.control.async, keyword.other.async | #ae8951 | italic |
| string.regexp, string.regexp.js, string.regexp.ts | #ec4899 | — |
| keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison | #658297 | — |
| keyword.operator.new, keyword.operator.delete, keyword.operator.typeof | #ae8951 | — |
| keyword.other.import, keyword.other.export, keyword.other.from | #ae8951 | — |
| keyword.control.import, keyword.control.export, keyword.control.from | #ae8951 | — |
| meta.tag.name, entity.name.tag.jsx, entity.name.tag.tsx | #ae8951 | — |
| markup.raw, markup.raw.block, markup.raw.inline | #34d399 | — |
| punctuation.definition.heading, punctuation.definition.bold, punctuation.definition.italic | #ae8951 | — |
| comment, punctuation.definition.comment | #778187 | italic |
| constant.character, constant.character.escape | #34d399 | — |
| constant.other.key, constant.other.property | #0891b2 | — |
| storage.modifier.readonly, storage.modifier.final | #9333ea | italic |
| storage.modifier.private, storage.modifier.protected | #ae8951 | italic |
| entity.name.function.decorator, entity.name.function.preprocessor | #f97316 | — |
| meta.attribute, support.attribute | #f97316 | italic |
| entity.name.function.async, entity.name.method.async | #658297 | italic |
| punctuation.definition.generic, punctuation.bracket.angle | #658297 | — |
| meta.generic, meta.type.parameters | #0891b2 | — |
| meta.type.annotation, meta.return.type | #0891b2 | — |
| storage.type.function.arrow, storage.type.function | #ae8951 | — |
| string.template, string.quoted.template | #34d399 | — |
| punctuation.definition.string.template, punctuation.definition.template-expression | #34d399 | — |
| comment.block.documentation, comment.documentation | #818c93 | italic |
| comment.todo, comment.line.todo | #818c93 | bold |
| comment.note, comment.line.note | #818c93 | italic |
| comment.warning, comment.line.warning | #818c93 | bold |
| comment.error, comment.line.error | #818c93 | bold |
| meta.function-call, meta.function-call.method | #658297 | — |
| entity.name.function.call, entity.name.function.member | #658297 | — |
| variable.other.constant, variable.other.constant.property | #9333ea | bold |
| variable.other.member, variable.other.property | #0891b2 | — |
| variable.other.global, variable.other.global-property | #0891b2 | — |
| keyword.operator.logical, keyword.operator.bitwise | #658297 | — |
| keyword.operator.spread, keyword.operator.rest | #658297 | — |
| keyword.other.declaration, keyword.declaration | #ae8951 | — |
| punctuation.separator, punctuation.delimiter | #1f2b33 | — |
| punctuation.section.block, punctuation.section.function | #1f2b33 | — |
| entity.name.lifetime, storage.modifier.lifetime | #ea580c | italic |
| entity.name.macro, entity.name.function.macro | #9333ea | — |
| keyword.unsafe, keyword.other.unsafe | #f87171 | — |
| entity.name.function.decorator.python, meta.function.decorator.python | #f97316 | italic |
| storage.type.function.python, keyword.type.python | #ae8951 | — |
| support.type.python, support.class.python | #b89660 | — |
| entity.name.type.interface, entity.name.type.enum | #eab308 | italic |
| entity.name.type.alias, entity.name.type.type-parameter | #0891b2 | italic |
| meta.tag.attributes, meta.jsx.attributes | #0891b2 | — |
| entity.other.attribute-name.jsx, entity.other.attribute-name.tsx | #658297 | — |
| entity.name.tag.css, entity.name.tag.scss | #ae8951 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #658297 | — |
| support.type.property-name.css, support.type.property-name.scss | #0891b2 | — |
| string.quoted.double.json, string.unquoted.yaml | #34d399 | — |
| constant.language.json, constant.language.yaml | #a855f7 | — |
| punctuation.definition.key.json, entity.name.key.yaml | #0891b2 | — |
| markup.heading, markup.heading.setext | #ca8a04 | bold |
| markup.bold, markup.bold.string | #1f2b33 | bold |
| markup.italic, markup.italic.string | #1f2b33 | italic |
| markup.inserted, markup.inserted.git | #22c55e | — |
| markup.deleted, markup.deleted.git | #ef4444 | — |
| markup.underline, markup.underline.link | #658297 | underline |
| fenced_code.block.language, markup.fenced_code.block | #0891b2 | — |
| comment.line.double-slash | #818c93 | italic |
| string | #6a8473 | — |
| string.quoted.single | #789683 | — |
| string.quoted.double | #789683 | — |
| constant.numeric | #817b94 | — |
| keyword | #658297 | — |
| keyword.control.flow | #658297 | italic |
| keyword.operator | #658297 | — |
| entity.name.function | #4a6a82 | — |
| entity.name.type | #6a8473 | — |
| entity.name.class | #b89660 | — |
| storage.type | #658297 | — |
| support.type | #789683 | — |
| storage.modifier | #ae8951 | italic |
| support.constant.property-value.css | #34d399 | — |
| punctuation.definition.entity.css | #658297 | — |
| markup.strikethrough | #1f2b33 | strikethrough |
| invalid, invalid.illegal, invalid.deprecated | #b91c1c | strikethrough |
| variable.language | #658297 | italic |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end | #6b4048 | — |
| markup.inline.raw, markup.raw, markup.fenced_code | #9a92b0 | — |
| markup.changed | #92400e | — |
| markup.list, markup.list.unnumbered, markup.list.numbered, punctuation.definition.list | #4a6a82 | — |
| markup.quote, markup.quote.markdown | #818c93 | italic |
| variable, variable.other.php | #1f2b33 | — |
| punctuation.definition.variable, punctuation.definition.variable.php | #1f2b33 | — |
| variable.other.readwrite | #1f2b33 | — |
| meta.type.declaration, meta.interface.declaration | #658297 | — |
| entity.name.namespace, entity.name.namespace.python, support.type.python, support.class.python | #92400e | — |
| keyword.operator.null-coalescing, keyword.operator.null-coalescing.js, keyword.operator.null-coalescing.ts, keyword.operator.logical, keyword.operator.logical.js, keyword.operator.logical.ts | #0891b2 | bold |
| punctuation.accessor.optional, punctuation.accessor.optional.js, punctuation.accessor.optional.ts, keyword.operator.optional, keyword.operator.optional.js, keyword.operator.optional.ts | #0891b2 | — |
| entity.name.tag.jsx, entity.name.tag.tsx, support.class.component, support.class.component.jsx, support.class.component.tsx, entity.name.function.component, entity.name.function.component.jsx, entity.name.function.component.tsx | #7c3aed | bold |
| punctuation.definition.tag.jsx, punctuation.definition.tag.tsx | #8c8a82 | — |
| meta.tag.jsx, meta.tag.tsx, meta.jsx, meta.tsx | #0891b2 | — |
| punctuation.bracket, punctuation.parenthesis, punctuation.curlybrace, punctuation.squarebracket | #1f2b33 | — |
| constant, constant.other, support.constant | #a855f7 | — |
| constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #a855f7 | — |
| constant.language, constant.language.boolean, constant.language.null | #a855f7 | italic |
| storage.modifier.async, storage.modifier.const, storage.modifier.static | #ae8951 | italic |
| meta.decorator, meta.decorator.python, punctuation.decorator | #f97316 | italic |
| keyword.control.await, keyword.control.async, keyword.other.async | #ae8951 | italic |
| string.regexp, string.regexp.js, string.regexp.ts | #ec4899 | — |
| keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison | #658297 | — |
| keyword.operator.new, keyword.operator.delete, keyword.operator.typeof | #ae8951 | — |
| keyword.other.import, keyword.other.export, keyword.other.from | #ae8951 | — |
| keyword.control.import, keyword.control.export, keyword.control.from | #ae8951 | — |
| meta.tag.name, entity.name.tag.jsx, entity.name.tag.tsx | #ae8951 | — |
| markup.raw, markup.raw.block, markup.raw.inline | #34d399 | — |
| punctuation.definition.heading, punctuation.definition.bold, punctuation.definition.italic | #ae8951 | — |
| comment, punctuation.definition.comment | #778187 | italic |
| constant.character, constant.character.escape | #34d399 | — |
| constant.other.key, constant.other.property | #0891b2 | — |
| storage.modifier.readonly, storage.modifier.final | #9333ea | italic |
| storage.modifier.private, storage.modifier.protected | #ae8951 | italic |
| entity.name.function.decorator, entity.name.function.preprocessor | #f97316 | — |
| meta.attribute, support.attribute | #f97316 | italic |
| entity.name.function.async, entity.name.method.async | #658297 | italic |
| punctuation.definition.generic, punctuation.bracket.angle | #658297 | — |
| meta.generic, meta.type.parameters | #0891b2 | — |
| meta.type.annotation, meta.return.type | #0891b2 | — |
| storage.type.function.arrow, storage.type.function | #ae8951 | — |
| string.template, string.quoted.template | #34d399 | — |
| punctuation.definition.string.template, punctuation.definition.template-expression | #34d399 | — |
| comment.block.documentation, comment.documentation | #818c93 | italic |
| comment.todo, comment.line.todo | #818c93 | bold |
| comment.note, comment.line.note | #818c93 | italic |
| comment.warning, comment.line.warning | #818c93 | bold |
| comment.error, comment.line.error | #818c93 | bold |
| meta.function-call, meta.function-call.method | #658297 | — |
| entity.name.function.call, entity.name.function.member | #658297 | — |
| variable.other.constant, variable.other.constant.property | #9333ea | bold |
| variable.other.member, variable.other.property | #0891b2 | — |
| variable.other.global, variable.other.global-property | #0891b2 | — |
| keyword.operator.logical, keyword.operator.bitwise | #658297 | — |
| keyword.operator.spread, keyword.operator.rest | #658297 | — |
| keyword.other.declaration, keyword.declaration | #ae8951 | — |
| punctuation.separator, punctuation.delimiter | #1f2b33 | — |
| punctuation.section.block, punctuation.section.function | #1f2b33 | — |
| entity.name.lifetime, storage.modifier.lifetime | #ea580c | italic |
| entity.name.macro, entity.name.function.macro | #9333ea | — |
| keyword.unsafe, keyword.other.unsafe | #f87171 | — |
| entity.name.function.decorator.python, meta.function.decorator.python | #f97316 | italic |
| storage.type.function.python, keyword.type.python | #ae8951 | — |
| support.type.python, support.class.python | #b89660 | — |
| entity.name.type.interface, entity.name.type.enum | #eab308 | italic |
| entity.name.type.alias, entity.name.type.type-parameter | #0891b2 | italic |
| meta.tag.attributes, meta.jsx.attributes | #0891b2 | — |
| entity.other.attribute-name.jsx, entity.other.attribute-name.tsx | #658297 | — |
| entity.name.tag.css, entity.name.tag.scss | #ae8951 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #658297 | — |
| support.type.property-name.css, support.type.property-name.scss | #0891b2 | — |
| string.quoted.double.json, string.unquoted.yaml | #34d399 | — |
| constant.language.json, constant.language.yaml | #a855f7 | — |
| punctuation.definition.key.json, entity.name.key.yaml | #0891b2 | — |
| markup.heading, markup.heading.setext | #ca8a04 | bold |
| markup.bold, markup.bold.string | #1f2b33 | bold |
| markup.italic, markup.italic.string | #1f2b33 | italic |
| markup.inserted, markup.inserted.git | #22c55e | — |
| markup.deleted, markup.deleted.git | #ef4444 | — |
| markup.underline, markup.underline.link | #658297 | underline |
| fenced_code.block.language, markup.fenced_code.block | #0891b2 | — |
| comment.line.double-slash | #818c93 | italic |
| string | #6a8473 | — |
| string.quoted.single | #789683 | — |
| string.quoted.double | #789683 | — |
| constant.numeric | #817b94 | — |
| keyword | #658297 | — |
| keyword.control.flow | #658297 | italic |
| keyword.operator | #658297 | — |
| entity.name.function | #4a6a82 | — |
| entity.name.type | #6a8473 | — |
| entity.name.class | #b89660 | — |
| storage.type | #658297 | — |
| support.type | #789683 | — |
| storage.modifier | #ae8951 | italic |
| support.constant.property-value.css | #34d399 | — |
| punctuation.definition.entity.css | #658297 | — |
| markup.strikethrough | #1f2b33 | strikethrough |
| invalid, invalid.illegal, invalid.deprecated | #b91c1c | strikethrough |
| variable.language | #658297 | italic |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end | #6b4048 | — |
| markup.inline.raw, markup.raw, markup.fenced_code | #9a92b0 | — |
| markup.changed | #92400e | — |
| markup.list, markup.list.unnumbered, markup.list.numbered, punctuation.definition.list | #4a6a82 | — |
| markup.quote, markup.quote.markdown | #818c93 | italic |
| variable, variable.other.php | #1f2b33 | — |
| punctuation.definition.variable, punctuation.definition.variable.php | #1f2b33 | — |
| variable.other.readwrite | #1f2b33 | — |
| meta.type.declaration, meta.interface.declaration | #658297 | — |
| entity.name.namespace, entity.name.namespace.python, support.type.python, support.class.python | #92400e | — |
| keyword.operator.null-coalescing, keyword.operator.null-coalescing.js, keyword.operator.null-coalescing.ts, keyword.operator.logical, keyword.operator.logical.js, keyword.operator.logical.ts | #0891b2 | bold |
| punctuation.accessor.optional, punctuation.accessor.optional.js, punctuation.accessor.optional.ts, keyword.operator.optional, keyword.operator.optional.js, keyword.operator.optional.ts | #0891b2 | — |
| entity.name.tag.jsx, entity.name.tag.tsx, support.class.component, support.class.component.jsx, support.class.component.tsx, entity.name.function.component, entity.name.function.component.jsx, entity.name.function.component.tsx | #7c3aed | bold |
| punctuation.definition.tag.jsx, punctuation.definition.tag.tsx | #8c8a82 | — |
| meta.tag.jsx, meta.tag.tsx, meta.jsx, meta.tsx | #0891b2 | — |
| comment.block, comment.block.css, comment.block.scss, comment.block.less, comment.block.postcss | #9ccae0 | italic |
| punctuation.bracket, punctuation.parenthesis, punctuation.curlybrace, punctuation.squarebracket | #d1e0e8 | — |
| constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #9a8ab0 | — |
| storage.modifier.async, storage.modifier.const, storage.modifier.static | #a86878 | italic |
| meta.decorator, meta.decorator.python, punctuation.decorator | #c08060 | italic |
| keyword.control.await, keyword.control.async, keyword.other.async | #a86878 | italic |
| string.regexp, string.regexp.js, string.regexp.ts | #a87080 | — |
| keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison | #7ab0c8 | — |
| keyword.operator.new, keyword.operator.delete, keyword.operator.typeof | #a86878 | — |
| keyword.other.import, keyword.other.export, keyword.other.from | #a86878 | — |
| keyword.control.import, keyword.control.export, keyword.control.from | #a86878 | — |
| meta.tag.name, entity.name.tag.jsx, entity.name.tag.tsx | #a86878 | — |
| markup.raw, markup.raw.block, markup.raw.inline | #7aa88a | — |
| punctuation.definition.heading, punctuation.definition.bold, punctuation.definition.italic | #a86878 | — |
| comment, punctuation.definition.comment | #9ccae0 | italic |
| constant.other.key, constant.other.property | #6a9ab8 | — |
| storage.modifier.readonly, storage.modifier.final | #7e6ca3 | italic |
| storage.modifier.private, storage.modifier.protected | #a86878 | italic |
| entity.name.function.decorator, entity.name.function.preprocessor | #c08060 | — |
| meta.attribute, support.attribute | #c08060 | italic |
| entity.name.function.async, entity.name.method.async | #5a8fb0 | italic |
| keyword.operator.null-coalescing, keyword.operator.null-coalescing.js, keyword.operator.null-coalescing.ts, keyword.operator.logical, keyword.operator.logical.js, keyword.operator.logical.ts | #c08060 | bold |
| punctuation.accessor.optional, punctuation.accessor.optional.js, punctuation.accessor.optional.ts, keyword.operator.optional, keyword.operator.optional.js, keyword.operator.optional.ts | #c08060 | — |
| entity.name.tag.jsx, entity.name.tag.tsx, support.class.component, support.class.component.jsx, support.class.component.tsx, entity.name.function.component, entity.name.function.component.jsx, entity.name.function.component.tsx | #9a8ab0 | bold |
| punctuation.definition.tag.jsx, punctuation.definition.tag.tsx | #6b8a98 | — |
| meta.tag.jsx, meta.tag.tsx, meta.jsx, meta.tsx | #7ab0c8 | — |
| punctuation.definition.generic, punctuation.bracket.angle | #7ab0c8 | — |
| meta.generic, meta.type.parameters | #6a9ab8 | — |
| meta.type.annotation, meta.return.type | #6a9ab8 | — |
| storage.type.function.arrow, storage.type.function | #a86878 | — |
| string.template, string.quoted.template | #7aa88a | — |
| punctuation.definition.string.template, punctuation.definition.template-expression | #7aa88a | — |
| string.escape, constant.character.escape | #b87888 | — |
| comment.block.documentation, comment.documentation | #9ccae0 | italic |
| comment.todo, comment.line.todo | #c9a85c | bold |
| comment.note, comment.line.note | #6a9ab8 | italic |
| comment.warning, comment.line.warning | #c9a85c | bold |
| comment.error, comment.line.error | #c97565 | bold |
| meta.function-call, meta.function-call.method | #7ab0c8 | — |
| entity.name.function.call, entity.name.function.member | #7ab0c8 | — |
| variable.other.constant, variable.other.constant.property | #7e6ca3 | bold |
| variable.other.member, variable.other.property | #6a9ab8 | — |
| variable.other.global, variable.other.global-property | #6a9ab8 | — |
| keyword.operator.logical, keyword.operator.bitwise | #7ab0c8 | — |
| keyword.operator.spread, keyword.operator.rest | #7ab0c8 | — |
| keyword.other.declaration, keyword.declaration | #a86878 | — |
| punctuation.separator, punctuation.delimiter | #d1e0e8 | — |
| punctuation.section.block, punctuation.section.function | #d1e0e8 | — |
| entity.name.lifetime, storage.modifier.lifetime | #b87050 | italic |
| entity.name.macro, entity.name.function.macro | #7e6ca3 | — |
| keyword.unsafe, keyword.other.unsafe | #c97565 | — |
| entity.name.function.decorator.python, meta.function.decorator.python | #c08060 | italic |
| storage.type.function.python, keyword.type.python | #a86878 | — |
| support.type.python, support.class.python | #b89040 | — |
| entity.name.type.interface, entity.name.type.enum | #c9a050 | italic |
| entity.name.type.alias, entity.name.type.type-parameter | #6a9ab8 | italic |
| meta.type.declaration, meta.interface.declaration | #6a9ab8 | — |
| meta.tag.attributes, meta.jsx.attributes | #6a9ab8 | — |
| entity.other.attribute-name.jsx, entity.other.attribute-name.tsx | #5a8fb0 | — |
| entity.name.tag.css, entity.name.tag.scss | #a86878 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #5a8fb0 | — |
| support.type.property-name.css, support.type.property-name.scss | #6a9ab8 | — |
| string.quoted.double.json, string.unquoted.yaml | #7aa88a | — |
| constant.language.json, constant.language.yaml | #9a8ab0 | — |
| punctuation.definition.key.json, entity.name.key.yaml | #6a9ab8 | — |
| markup.heading, markup.heading.setext | #b89040 | bold |
| markup.bold, markup.bold.string | #d1e0e8 | bold |
| markup.italic, markup.italic.string | #d1e0e8 | italic |
| markup.inserted, markup.inserted.git | #5a9a6a | — |
| markup.deleted, markup.deleted.git | #c97565 | — |
| markup.underline, markup.underline.link | #7ab0c8 | underline |
| fenced_code.block.language, markup.fenced_code.block | #6a9ab8 | — |
| comment.line.double-slash | #9ccae0 | italic |
| string | #7aa88a | — |
| string.quoted.single | #7aa88a | — |
| string.quoted.double | #7aa88a | — |
| constant.numeric | #9a8ab0 | — |
| constant.language | #9a8ab0 | — |
| keyword | #a86878 | — |
| keyword.control.flow | #a86878 | italic |
| keyword.operator | #7ab0c8 | — |
| entity.name.function | #5a8fb0 | — |
| entity.name.type | #6a9ab8 | — |
| entity.name.class | #b89040 | — |
| storage.type | #a86878 | — |
| support.type | #6a9ab8 | — |
| variable | #b8d4e4 | — |
| variable.parameter | #b87050 | — |
| entity.name.tag | #a86878 | — |
| entity.other.attribute-name | #5a8fb0 | — |
| constant.character | #7aa88a | — |
| support.constant | #9a8ab0 | — |
| support.function | #5a8fb0 | — |
| support.variable | #b8d4e4 | — |
| punctuation.definition.variable | #b8d4e4 | — |
| storage.modifier | #a86878 | italic |
| support.constant.property-value.css | #7aa88a | — |
| punctuation.definition.entity.css | #5a8fb0 | — |
| markup.strikethrough | #d1e0e8 | strikethrough |
| string.quoted.other.lt-gt.include, string.quoted.other.lt-gt.include.cpp, string.quoted.other.lt-gt.include.c, string.quoted.other.lt-gt.include.objc, string.quoted.other.lt-gt.include.objcpp, meta.preprocessor.include string, meta.preprocessor.include entity.name, meta.preprocessor.include support.class | #7aa88a | — |
| meta.preprocessor.include punctuation.definition.string, meta.preprocessor.include punctuation.bracket | #6a9078 | — |
| keyword.control.directive.include, keyword.control.directive.include.cpp, keyword.control.directive.include.c, keyword.control.directive.include.objc, keyword.control.directive.include.objcpp | #a86878 | — |
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}!`;
}