Fourteen modern developer themes built on one design system — Tokyo Night, Deep Ocean, Night Owl, Midnight, Aurora, Cyberpunk, Obsidian, Forest, Crimson, Arctic, Espresso, Sunset, Pure Light and Parchment.
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 |
|---|---|---|
| source, text | #2f333c | — |
| comment, punctuation.definition.comment, unused.comment, wildcard.comment | #6a707e | italic |
| comment.block.documentation, comment.line.documentation, string.quoted.docstring, comment.block.documentation punctuation.definition.comment | #5f6875 | italic |
| comment.block.documentation storage.type.class.jsdoc, comment.block.documentation entity.name.type.instance.jsdoc, comment.block.documentation variable.other.jsdoc, keyword.other.phpdoc, storage.type.class.doxygen | #7a3fc4 | italic |
| keyword.codetag.notation, comment.notation | #a8560d | bold |
| keyword, keyword.other, storage.type.function.arrow | #7a3fc4 | — |
| keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.at-rule, keyword.package, keyword.import, keyword.map, keyword.function, keyword.var | #6c33b4 | italic |
| storage, storage.type, storage.modifier, keyword.other.important, keyword.other.unit, keyword.other.template, keyword.other.substitution | #7a3fc4 | — |
| variable.language.this, variable.language.self, variable.language.super, variable.language.special, keyword.other.this, constant.language.this | #7a3fc4 | italic |
| keyword.operator.new, keyword.operator.expression, keyword.operator.wordlike | #6c33b4 | — |
| entity.name.function, support.function, meta.function-call.generic, meta.definition.method entity.name.function, entity.name.function.member | #1d6fd0 | — |
| meta.function-call entity.name.function, variable.function, support.function.builtin, meta.method-call entity.name.function | #1d6fd0 | — |
| entity.name.function.preprocessor, entity.name.function.macro | #1d6fd0 | italic |
| meta.decorator, entity.name.function.decorator, punctuation.decorator, meta.decorator variable.other, meta.attribute, entity.name.function.attribute | #a8560d | italic |
| variable, variable.other, variable.other.readwrite, meta.definition.variable | #2f333c | — |
| variable.other.constant, variable.other.enummember, entity.name.constant, constant.other.caps, variable.other.readonly | #a8560d | — |
| variable.parameter, meta.parameter, meta.function.parameters variable.other, variable.other.jsdoc | #136271 | italic |
| variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property, variable.object.property, entity.name.variable.field, variable.other.member | #1a5fb4 | — |
| support.type.property-name, meta.mapping.key string, entity.name.tag.yaml | #1a5fb4 | — |
| support.variable, variable.language, support.constant.dom | #a8560d | — |
| entity.name.type, support.type, entity.name.type.alias, meta.type.annotation entity.name.type, storage.type.primitive, support.class.builtin | #0f6f80 | — |
| entity.name.class, entity.name.type.class, support.class, meta.definition.class entity.name, entity.other.inherited-class, entity.name.type.struct | #0f6f80 | — |
| entity.name.type.interface, entity.name.interface, meta.interface entity.name | #0d616f | — |
| entity.name.type.enum, entity.name.enum, storage.type.enum | #0f6f80 | — |
| entity.name.type.parameter, meta.type.parameters entity.name.type, storage.type.generic | #0f6f80 | italic |
| entity.name.namespace, entity.name.type.namespace, entity.name.type.module, entity.name.module, entity.name.scope-resolution, support.module | #0f6f80 | — |
| string, string.quoted, string.template, punctuation.definition.string | #17795e | — |
| constant.character.escape, string.regexp constant.character.escape, constant.other.character-class.escape | #8c4a0c | — |
| punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line | #6c33b4 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #a8560d | — |
| constant.language.boolean, constant.language.true, constant.language.false | #a8560d | — |
| constant.language.null, constant.language.undefined, constant.language.nil, constant.language.none | #a8560d | — |
| constant.language, support.constant, constant.other | #a8560d | — |
| string.regexp, string.regexp punctuation.definition.string, constant.other.character-class.set.regexp | #a52a48 | — |
| keyword.operator.or.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp | #8c4a0c | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.ternary, keyword.operator.spread, keyword.operator.optional, keyword.operator.type | #4f5a6b | — |
| punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.dict, punctuation.section | #5d6675 | — |
| entity.name.tag, meta.tag, punctuation.definition.tag | #c02648 | — |
| entity.name.tag.js.jsx, entity.name.tag.tsx, support.class.component | #0f6f80 | — |
| entity.other.attribute-name, meta.attribute.class, meta.attribute.id, entity.other.attribute-name.html | #a8560d | italic |
| meta.attribute string, meta.tag string.quoted, string.quoted.double.html | #17795e | — |
| meta.tag.sgml, entity.name.tag.doctype, meta.tag.metadata.doctype | #6a707e | italic |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #0f6f80 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less | #1a5fb4 | — |
| support.constant.property-value.css, meta.property-value.css | #a8560d | — |
| keyword.other.unit.css, support.function.misc.css, support.function.transform.css | #a8560d | — |
| variable.scss, variable.other.less, variable.declaration.scss | #a8560d | — |
| keyword.control.at-rule.css, keyword.control.at-rule.scss, punctuation.definition.keyword.css | #6c33b4 | — |
| support.type.property-name.json | #1a5fb4 | — |
| source.json meta.structure.dictionary.json support.type.property-name.json | #1a5fb4 | — |
| punctuation.definition.dictionary.json, punctuation.separator.dictionary.key-value.json | #5d6675 | — |
| entity.name.tag.yaml, support.type.property-name.yaml | #1a5fb4 | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml | #a8560d | — |
| string.unquoted.plain.out.yaml, string.unquoted.block.yaml | #17795e | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #1d6fd0 | bold |
| markup.bold, markup.bold string | #a8560d | bold |
| markup.italic, markup.italic string | #7a3fc4 | italic |
| markup.strikethrough | #6a707e | strikethrough |
| markup.underline.link, string.other.link, constant.other.reference.link.markdown | #2563c9 | underline |
| string.other.link.title.markdown, meta.link.inline.markdown | #1a5fb4 | — |
| markup.inline.raw, markup.fenced_code, markup.raw.block | #17795e | — |
| markup.quote, beginning.punctuation.definition.quote.markdown | #6a707e | italic |
| beginning.punctuation.definition.list.markdown, markup.list punctuation.definition | #c02648 | — |
| meta.separator.markdown | #5d6675 | — |
| markup.inserted, meta.diff.header.to-file | #17795e | — |
| markup.deleted, meta.diff.header.from-file | #c02648 | — |
| markup.changed | #a8560d | — |
| meta.diff.header, meta.diff.range | #1d6fd0 | — |
| variable.other.normal.shell, variable.other.special.shell, punctuation.definition.variable.shell | #a8560d | — |
| support.function.builtin.shell, keyword.command.shell | #1d6fd0 | — |
| constant.other.option, string.unquoted.argument.shell | #136271 | — |
| variable.parameter.function.language.special.self.python, variable.language.special.self.python | #7a3fc4 | italic |
| entity.name.function.decorator.python, meta.function.decorator.python support.type | #a8560d | italic |
| meta.fstring.python, string.interpolated.python | #17795e | — |
| entity.name.package.go, keyword.package.go | #0f6f80 | — |
| support.type.error.go | #c02648 | — |
| storage.modifier.lifetime.rust, entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust | #c02648 | italic |
| entity.name.function.macro.rust, support.macro.rust | #1d6fd0 | — |
| meta.attribute.rust, meta.annotation.rust | #a8560d | italic |
| storage.type.annotation.java, punctuation.definition.annotation.java | #a8560d | italic |
| storage.type.annotation.kotlin, meta.annotation.kotlin | #a8560d | italic |
| storage.modifier.attribute.swift, keyword.other.declaration-specifier.swift | #a8560d | — |
| variable.other.php, punctuation.definition.variable.php | #2f333c | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.embedded.block.php | #c02648 | — |
| constant.other.symbol.ruby, constant.language.symbol.ruby, constant.language.symbol.hashkey.ruby | #a8560d | — |
| punctuation.section.embedded.ruby, meta.embedded.line.ruby | #6c33b4 | — |
| keyword.control.directive, punctuation.definition.directive, meta.preprocessor | #6c33b4 | italic |
| meta.interpolation.cs, punctuation.definition.interpolation.cs | #6c33b4 | — |
| storage.type.annotation.dart, meta.declaration.dart | #a8560d | — |
| keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql | #6c33b4 | italic |
| support.function.aggregate.sql, support.function.scalar.sql | #1d6fd0 | — |
| entity.name.function.sql, constant.other.database-name.sql, constant.other.table-name.sql | #0f6f80 | — |
| support.type.graphql, entity.name.type.graphql | #0f6f80 | — |
| variable.graphql, string.unquoted.alias.graphql | #1a5fb4 | — |
| entity.name.function.directive.graphql, keyword.other.directive.graphql | #a8560d | — |
| support.type.property-name.toml, variable.key.toml | #1a5fb4 | — |
| entity.name.section.toml, punctuation.definition.table.toml | #0f6f80 | — |
| entity.name.section.group-title.ini, keyword.other.definition.ini | #0f6f80 | — |
| keyword.other.special-method.dockerfile, keyword.control.dockerfile | #6c33b4 | italic |
| entity.name.function.target.makefile, entity.name.function.makefile | #1d6fd0 | — |
| entity.name.type.terraform, entity.name.label.terraform, storage.type.terraform | #0f6f80 | — |
| keyword.other.definition.ini, variable.other.env, source.env variable | #1a5fb4 | — |
| invalid, invalid.illegal | #c02648 | italic |
| invalid.deprecated | #a8560d | strikethrough |
| constant.other.placeholder, constant.other.color | #8c4a0c | — |
| entity.name.label, entity.name.goto-label | #c02648 | — |
| string.unquoted.key | #1a5fb4 | — |
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}!`;
}