A beautiful, elegant VS Code theme featuring stunning purple gradients and carefully crafted syntax highlighting. Available in both light and dark variants with comprehensive language support.
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 | #8b7b93 | italic |
| comment.block.documentation, punctuation.definition.comment.documentation | #9b8ba8 | italic |
| storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, comment.block.documentation keyword, comment.block.documentation storage.type, keyword.other.documentation, comment.block.documentation punctuation.definition.block.tag | #c4b5fd | italic |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.delete, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.void, keyword.other.unit, storage.type, storage.modifier | #a78bfa | italic |
| keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.trycatch, keyword.control.switch | #a78bfa | — |
| keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.spread, keyword.operator.rest, keyword.operator.ternary, punctuation.separator, punctuation.terminator | #56b6c2 | — |
| string, string.quoted, string.template, string.unquoted | #98c379 | — |
| punctuation.definition.string, string.template punctuation.definition.string | #98c379 | — |
| constant.character.escape, constant.other.character-class.regexp | #56b6c2 | bold |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #a78bfa | — |
| meta.template.expression | #e0def4 | — |
| constant.numeric | #ff79c6 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.language.this, variable.language.super, variable.language.self | #ff79c6 | italic |
| entity.name.function, meta.function-call.generic, support.function, keyword.other.special-method | #61afef | — |
| variable.parameter, meta.function.parameters variable, meta.parameters variable | #e0def4 | italic |
| entity.name.class, entity.name.type, entity.other.inherited-class, support.class, support.type | #e5c07b | — |
| variable, variable.other, meta.definition.variable | #e0def4 | — |
| variable.object.property, variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key | #e0def4 | — |
| entity.name.tag, punctuation.definition.tag | #eb6f92 | — |
| entity.other.attribute-name, meta.tag.attributes | #c4b5fd | italic |
| punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section.embedded, punctuation.section.method, punctuation.section.class, punctuation.section.inner-class, meta.brace.round, meta.brace.square, meta.brace.curly | #908caa | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, variable.other.meta.import, variable.other.meta.export | #c4b5fd | — |
| meta.object-binding-pattern-variable variable, meta.array-binding-pattern-variable variable | #e0def4 | — |
| entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less, entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #eb6f92 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.media.css | #56b6c2 | — |
| support.constant.property-value.css, constant.numeric.css, constant.numeric.scss, support.constant.color.w3c-standard-color-name.css | #a78bfa | — |
| variable.css, variable.argument.css, variable.scss, variable.less | #c4b5fd | — |
| keyword.other.unit.css, keyword.other.unit.scss | #ff79c6 | — |
| keyword.control.at-rule.scss, keyword.control.at-rule.css, keyword.control.at-rule.less, entity.name.tag.reference.scss, entity.other.attribute-name.parent-selector-suffix.css | #a78bfa | — |
| support.type.property-name.json | #56b6c2 | — |
| meta.structure.dictionary.value.json string.quoted.double, meta.structure.array.json string.quoted.double | #98c379 | — |
| entity.name.tag.yaml | #56b6c2 | — |
| string.unquoted.plain.out.yaml, string.unquoted.block.yaml | #98c379 | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml | #ff79c6 | — |
| storage.type.tag-handle.yaml | #a78bfa | — |
| entity.other.attribute-name.table.toml, entity.other.attribute-name.table.array.toml, support.type.property-name.table.toml | #eb6f92 | — |
| variable.key.toml, support.type.property-name.toml | #56b6c2 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #c4b5fd | bold |
| meta.paragraph.markdown | #e0def4 | — |
| markup.bold.markdown, punctuation.definition.bold.markdown | #eb6f92 | bold |
| markup.italic.markdown, punctuation.definition.italic.markdown | #e5c07b | italic |
| markup.inline.raw.markdown, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown | #98c379 | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.title.markdown, string.other.link.description.markdown | #56b6c2 | — |
| meta.link.inline.markdown string.other.link.title.markdown | #61afef | — |
| punctuation.definition.list.begin.markdown, markup.list.numbered.markdown, markup.list.unnumbered.markdown | #eb6f92 | — |
| markup.quote.markdown, punctuation.definition.quote.begin.markdown | #8b7b93 | italic |
| meta.separator.markdown | #3e4451 | — |
| markup.strikethrough.markdown | #6c7682 | strikethrough |
| variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, variable.language.special.cls.python | #ff79c6 | italic |
| entity.name.function.decorator.python, meta.function.decorator.python | #c4b5fd | italic |
| support.function.magic.python | #61afef | italic |
| constant.character.format.placeholder.other.python, punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python | #a78bfa | — |
| support.function.builtin.python | #61afef | — |
| string.quoted.docstring.multi.python | #9b8ba8 | italic |
| entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust | #eb6f92 | italic |
| entity.name.function.macro.rust, support.macro.rust, entity.name.function.macro.rules.rust | #c4b5fd | — |
| meta.attribute.rust, punctuation.definition.attribute.rust | #8b7b93 | — |
| keyword.other.unsafe.rust | #ff6b8a | bold |
| entity.name.package.go, entity.name.import.go | #c4b5fd | — |
| support.function.builtin.go | #61afef | — |
| variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell, punctuation.definition.variable.shell | #c4b5fd | — |
| support.function.builtin.shell | #61afef | — |
| entity.name.command.shell, support.function.external.shell | #22c55e | — |
| keyword.operator.pipe.shell, keyword.operator.redirect.shell | #56b6c2 | — |
| keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql, keyword.other.create.sql, keyword.other.data-integrity.sql | #a78bfa | — |
| support.function.sql, support.function.aggregate.sql | #61afef | — |
| storage.type.sql | #56b6c2 | — |
| variable.other.php, punctuation.definition.variable.php | #e0def4 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #eb6f92 | — |
| constant.language.symbol.ruby, punctuation.definition.symbol.ruby | #56b6c2 | — |
| variable.other.readwrite.instance.ruby | #eb6f92 | — |
| storage.type.annotation.java, punctuation.definition.annotation.java, storage.type.annotation.cs, punctuation.definition.annotation.cs | #c4b5fd | italic |
| storage.modifier.import.java, storage.modifier.package.java, keyword.other.using.cs, entity.name.type.namespace.cs | #c4b5fd | — |
| meta.diff.header, meta.diff.index | #c4b5fd | bold |
| markup.inserted.diff, punctuation.definition.inserted.diff | #22c55e | — |
| markup.deleted.diff, punctuation.definition.deleted.diff | #ff6b8a | — |
| markup.changed.diff | #ffb347 | — |
| meta.diff.range | #56b6c2 | — |
| punctuation.decorator, meta.decorator, meta.decorator entity.name.function | #c4b5fd | — |
| string.regexp | #ff79c6 | — |
| punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.quantifier.regexp | #56b6c2 | — |
| keyword.control.anchor.regexp, keyword.operator.or.regexp | #a78bfa | — |
| invalid, invalid.deprecated | #ff6b8a | bold underline |
| entity.name.type.ts, entity.name.type.tsx, entity.name.type.module.tsx, meta.type.annotation | #56b6c2 | — |
| variable.other.enummember.ts, variable.other.enummember.tsx | #ff79c6 | — |
| entity.name.type.type-parameter, meta.type.parameters entity.name.type | #e5c07b | — |
| support.class.component.jsx, support.class.component.tsx | #eb6f92 | — |
| punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx | #a78bfa | — |
| markup.raw, markup.inline.raw | #98c379 | — |
| markup.inserted | #22c55e | — |
| markup.deleted | #ff6b8a | — |
| markup.changed | #ffb347 | — |
| markup.underline | — | 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 | #a78bfa | italic |
| comment.block.documentation, punctuation.definition.comment.documentation | #8b5cf6 | italic |
| storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, comment.block.documentation keyword, comment.block.documentation storage.type, keyword.other.documentation, comment.block.documentation punctuation.definition.block.tag | #7c3aed | italic |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.delete, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.void, keyword.other.unit, storage.type, storage.modifier | #7c3aed | italic |
| keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.trycatch, keyword.control.switch | #7c3aed | — |
| keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.spread, keyword.operator.rest, keyword.operator.ternary, punctuation.separator, punctuation.terminator | #0891b2 | — |
| string, string.quoted, string.template, string.unquoted | #059669 | — |
| punctuation.definition.string, string.template punctuation.definition.string | #047857 | — |
| constant.character.escape, constant.other.character-class.regexp | #0891b2 | bold |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #7c3aed | — |
| meta.template.expression | #374151 | — |
| constant.numeric | #db2777 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.language.this, variable.language.super, variable.language.self | #db2777 | italic |
| entity.name.function, meta.function-call.generic, support.function, keyword.other.special-method | #d97706 | — |
| variable.parameter, meta.function.parameters variable, meta.parameters variable | #374151 | italic |
| entity.name.class, entity.name.type, entity.other.inherited-class, support.class, support.type | #0284c7 | — |
| variable, variable.other, meta.definition.variable | #374151 | — |
| variable.object.property, variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key | #374151 | — |
| entity.name.tag, punctuation.definition.tag | #db2777 | — |
| entity.other.attribute-name, meta.tag.attributes | #7c3aed | italic |
| punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section.embedded, punctuation.section.method, punctuation.section.class, punctuation.section.inner-class, meta.brace.round, meta.brace.square, meta.brace.curly | #6b7280 | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, variable.other.meta.import, variable.other.meta.export | #7c3aed | — |
| meta.object-binding-pattern-variable variable, meta.array-binding-pattern-variable variable | #374151 | — |
| entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less, entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #db2777 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.media.css | #0284c7 | — |
| support.constant.property-value.css, constant.numeric.css, constant.numeric.scss, support.constant.color.w3c-standard-color-name.css | #d97706 | — |
| variable.css, variable.argument.css, variable.scss, variable.less | #7c3aed | — |
| keyword.other.unit.css, keyword.other.unit.scss | #db2777 | — |
| keyword.control.at-rule.scss, keyword.control.at-rule.css, keyword.control.at-rule.less, entity.name.tag.reference.scss, entity.other.attribute-name.parent-selector-suffix.css | #7c3aed | — |
| support.type.property-name.json | #0284c7 | — |
| meta.structure.dictionary.value.json string.quoted.double, meta.structure.array.json string.quoted.double | #059669 | — |
| entity.name.tag.yaml | #0284c7 | — |
| string.unquoted.plain.out.yaml, string.unquoted.block.yaml | #059669 | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml | #db2777 | — |
| storage.type.tag-handle.yaml | #7c3aed | — |
| entity.other.attribute-name.table.toml, entity.other.attribute-name.table.array.toml, support.type.property-name.table.toml | #db2777 | — |
| variable.key.toml, support.type.property-name.toml | #0284c7 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #7c3aed | bold |
| meta.paragraph.markdown | #374151 | — |
| markup.bold.markdown, punctuation.definition.bold.markdown | #db2777 | bold |
| markup.italic.markdown, punctuation.definition.italic.markdown | #d97706 | italic |
| markup.inline.raw.markdown, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown | #059669 | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.title.markdown, string.other.link.description.markdown | #0284c7 | — |
| meta.link.inline.markdown string.other.link.title.markdown | #d97706 | — |
| punctuation.definition.list.begin.markdown, markup.list.numbered.markdown, markup.list.unnumbered.markdown | #db2777 | — |
| markup.quote.markdown, punctuation.definition.quote.begin.markdown | #a78bfa | italic |
| meta.separator.markdown | #e5e5e5 | — |
| markup.strikethrough.markdown | #999999 | strikethrough |
| variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, variable.language.special.cls.python | #db2777 | italic |
| entity.name.function.decorator.python, meta.function.decorator.python | #7c3aed | italic |
| support.function.magic.python | #d97706 | italic |
| constant.character.format.placeholder.other.python, punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python | #7c3aed | — |
| support.function.builtin.python | #d97706 | — |
| string.quoted.docstring.multi.python | #8b5cf6 | italic |
| entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust | #db2777 | italic |
| entity.name.function.macro.rust, support.macro.rust, entity.name.function.macro.rules.rust | #7c3aed | — |
| meta.attribute.rust, punctuation.definition.attribute.rust | #6b7280 | — |
| keyword.other.unsafe.rust | #dc2626 | bold |
| entity.name.package.go, entity.name.import.go | #7c3aed | — |
| support.function.builtin.go | #d97706 | — |
| variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell, punctuation.definition.variable.shell | #7c3aed | — |
| support.function.builtin.shell | #d97706 | — |
| entity.name.command.shell, support.function.external.shell | #059669 | — |
| keyword.operator.pipe.shell, keyword.operator.redirect.shell | #0891b2 | — |
| keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql, keyword.other.create.sql, keyword.other.data-integrity.sql | #7c3aed | — |
| support.function.sql, support.function.aggregate.sql | #d97706 | — |
| storage.type.sql | #0891b2 | — |
| variable.other.php, punctuation.definition.variable.php | #374151 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #db2777 | — |
| constant.language.symbol.ruby, punctuation.definition.symbol.ruby | #0891b2 | — |
| variable.other.readwrite.instance.ruby | #db2777 | — |
| storage.type.annotation.java, punctuation.definition.annotation.java, storage.type.annotation.cs, punctuation.definition.annotation.cs | #7c3aed | italic |
| storage.modifier.import.java, storage.modifier.package.java, keyword.other.using.cs, entity.name.type.namespace.cs | #7c3aed | — |
| meta.diff.header, meta.diff.index | #7c3aed | bold |
| markup.inserted.diff, punctuation.definition.inserted.diff | #059669 | — |
| markup.deleted.diff, punctuation.definition.deleted.diff | #dc2626 | — |
| markup.changed.diff | #d97706 | — |
| meta.diff.range | #0891b2 | — |
| punctuation.decorator, meta.decorator, meta.decorator entity.name.function | #7c3aed | — |
| string.regexp | #d97706 | — |
| punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.quantifier.regexp | #0891b2 | — |
| keyword.control.anchor.regexp, keyword.operator.or.regexp | #7c3aed | — |
| invalid, invalid.deprecated | #dc2626 | bold underline |
| entity.name.type.ts, entity.name.type.tsx, entity.name.type.module.tsx, meta.type.annotation | #0284c7 | — |
| variable.other.enummember.ts, variable.other.enummember.tsx | #db2777 | — |
| entity.name.type.type-parameter, meta.type.parameters entity.name.type | #0284c7 | — |
| support.class.component.jsx, support.class.component.tsx | #db2777 | — |
| punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx | #7c3aed | — |
| markup.raw, markup.inline.raw | #059669 | — |
| markup.inserted | #059669 | — |
| markup.deleted | #dc2626 | — |
| markup.changed | #d97706 | — |
| markup.underline | — | underline |
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}!`;
}