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 | #d3dae5 | — |
| comment, punctuation.definition.comment, unused.comment, wildcard.comment | #7c8798 | italic |
| comment.block.documentation, comment.line.documentation, string.quoted.docstring, comment.block.documentation punctuation.definition.comment | #8c97a8 | 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 | #a5a7f5 | italic |
| keyword.codetag.notation, comment.notation | #e8b675 | bold |
| keyword, keyword.other, storage.type.function.arrow | #a5a7f5 | — |
| 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 | #b6b8f8 | italic |
| storage, storage.type, storage.modifier, keyword.other.important, keyword.other.unit, keyword.other.template, keyword.other.substitution | #a5a7f5 | — |
| variable.language.this, variable.language.self, variable.language.super, variable.language.special, keyword.other.this, constant.language.this | #a5a7f5 | italic |
| keyword.operator.new, keyword.operator.expression, keyword.operator.wordlike | #b6b8f8 | — |
| entity.name.function, support.function, meta.function-call.generic, meta.definition.method entity.name.function, entity.name.function.member | #6f9dff | — |
| meta.function-call entity.name.function, variable.function, support.function.builtin, meta.method-call entity.name.function | #6f9dff | — |
| entity.name.function.preprocessor, entity.name.function.macro | #6f9dff | italic |
| meta.decorator, entity.name.function.decorator, punctuation.decorator, meta.decorator variable.other, meta.attribute, entity.name.function.attribute | #e8b675 | italic |
| variable, variable.other, variable.other.readwrite, meta.definition.variable | #d3dae5 | — |
| variable.other.constant, variable.other.enummember, entity.name.constant, constant.other.caps, variable.other.readonly | #e8b675 | — |
| variable.parameter, meta.parameter, meta.function.parameters variable.other, variable.other.jsdoc | #9dbfd2 | 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 | #8ab2ff | — |
| support.type.property-name, meta.mapping.key string, entity.name.tag.yaml | #8ab2ff | — |
| support.variable, variable.language, support.constant.dom | #e8b675 | — |
| entity.name.type, support.type, entity.name.type.alias, meta.type.annotation entity.name.type, storage.type.primitive, support.class.builtin | #74c8e8 | — |
| entity.name.class, entity.name.type.class, support.class, meta.definition.class entity.name, entity.other.inherited-class, entity.name.type.struct | #74c8e8 | — |
| entity.name.type.interface, entity.name.interface, meta.interface entity.name | #88d2ed | — |
| entity.name.type.enum, entity.name.enum, storage.type.enum | #74c8e8 | — |
| entity.name.type.parameter, meta.type.parameters entity.name.type, storage.type.generic | #74c8e8 | italic |
| entity.name.namespace, entity.name.type.namespace, entity.name.type.module, entity.name.module, entity.name.scope-resolution, support.module | #74c8e8 | — |
| string, string.quoted, string.template, punctuation.definition.string | #74cfa6 | — |
| constant.character.escape, string.regexp constant.character.escape, constant.other.character-class.escape | #f2cd9c | — |
| punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line | #b6b8f8 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #e8b675 | — |
| constant.language.boolean, constant.language.true, constant.language.false | #e8b675 | — |
| constant.language.null, constant.language.undefined, constant.language.nil, constant.language.none | #e8b675 | — |
| constant.language, support.constant, constant.other | #e8b675 | — |
| string.regexp, string.regexp punctuation.definition.string, constant.other.character-class.set.regexp | #f59ab0 | — |
| keyword.operator.or.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp | #f2cd9c | — |
| 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 | #93a6c2 | — |
| punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.dict, punctuation.section | #8894a6 | — |
| entity.name.tag, meta.tag, punctuation.definition.tag | #f07d94 | — |
| entity.name.tag.js.jsx, entity.name.tag.tsx, support.class.component | #74c8e8 | — |
| entity.other.attribute-name, meta.attribute.class, meta.attribute.id, entity.other.attribute-name.html | #e8b675 | italic |
| meta.attribute string, meta.tag string.quoted, string.quoted.double.html | #74cfa6 | — |
| meta.tag.sgml, entity.name.tag.doctype, meta.tag.metadata.doctype | #7c8798 | 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 | #74c8e8 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less | #8ab2ff | — |
| support.constant.property-value.css, meta.property-value.css | #e8b675 | — |
| keyword.other.unit.css, support.function.misc.css, support.function.transform.css | #e8b675 | — |
| variable.scss, variable.other.less, variable.declaration.scss | #e8b675 | — |
| keyword.control.at-rule.css, keyword.control.at-rule.scss, punctuation.definition.keyword.css | #b6b8f8 | — |
| support.type.property-name.json | #8ab2ff | — |
| source.json meta.structure.dictionary.json support.type.property-name.json | #8ab2ff | — |
| punctuation.definition.dictionary.json, punctuation.separator.dictionary.key-value.json | #8894a6 | — |
| entity.name.tag.yaml, support.type.property-name.yaml | #8ab2ff | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml | #e8b675 | — |
| string.unquoted.plain.out.yaml, string.unquoted.block.yaml | #74cfa6 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #6f9dff | bold |
| markup.bold, markup.bold string | #e8b675 | bold |
| markup.italic, markup.italic string | #a5a7f5 | italic |
| markup.strikethrough | #7c8798 | strikethrough |
| markup.underline.link, string.other.link, constant.other.reference.link.markdown | #5b8cf0 | underline |
| string.other.link.title.markdown, meta.link.inline.markdown | #8ab2ff | — |
| markup.inline.raw, markup.fenced_code, markup.raw.block | #74cfa6 | — |
| markup.quote, beginning.punctuation.definition.quote.markdown | #7c8798 | italic |
| beginning.punctuation.definition.list.markdown, markup.list punctuation.definition | #f07d94 | — |
| meta.separator.markdown | #8894a6 | — |
| markup.inserted, meta.diff.header.to-file | #74cfa6 | — |
| markup.deleted, meta.diff.header.from-file | #f07d94 | — |
| markup.changed | #e8b675 | — |
| meta.diff.header, meta.diff.range | #6f9dff | — |
| variable.other.normal.shell, variable.other.special.shell, punctuation.definition.variable.shell | #e8b675 | — |
| support.function.builtin.shell, keyword.command.shell | #6f9dff | — |
| constant.other.option, string.unquoted.argument.shell | #9dbfd2 | — |
| variable.parameter.function.language.special.self.python, variable.language.special.self.python | #a5a7f5 | italic |
| entity.name.function.decorator.python, meta.function.decorator.python support.type | #e8b675 | italic |
| meta.fstring.python, string.interpolated.python | #74cfa6 | — |
| entity.name.package.go, keyword.package.go | #74c8e8 | — |
| support.type.error.go | #f07d94 | — |
| storage.modifier.lifetime.rust, entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust | #f07d94 | italic |
| entity.name.function.macro.rust, support.macro.rust | #6f9dff | — |
| meta.attribute.rust, meta.annotation.rust | #e8b675 | italic |
| storage.type.annotation.java, punctuation.definition.annotation.java | #e8b675 | italic |
| storage.type.annotation.kotlin, meta.annotation.kotlin | #e8b675 | italic |
| storage.modifier.attribute.swift, keyword.other.declaration-specifier.swift | #e8b675 | — |
| variable.other.php, punctuation.definition.variable.php | #d3dae5 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.embedded.block.php | #f07d94 | — |
| constant.other.symbol.ruby, constant.language.symbol.ruby, constant.language.symbol.hashkey.ruby | #e8b675 | — |
| punctuation.section.embedded.ruby, meta.embedded.line.ruby | #b6b8f8 | — |
| keyword.control.directive, punctuation.definition.directive, meta.preprocessor | #b6b8f8 | italic |
| meta.interpolation.cs, punctuation.definition.interpolation.cs | #b6b8f8 | — |
| storage.type.annotation.dart, meta.declaration.dart | #e8b675 | — |
| keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql | #b6b8f8 | italic |
| support.function.aggregate.sql, support.function.scalar.sql | #6f9dff | — |
| entity.name.function.sql, constant.other.database-name.sql, constant.other.table-name.sql | #74c8e8 | — |
| support.type.graphql, entity.name.type.graphql | #74c8e8 | — |
| variable.graphql, string.unquoted.alias.graphql | #8ab2ff | — |
| entity.name.function.directive.graphql, keyword.other.directive.graphql | #e8b675 | — |
| support.type.property-name.toml, variable.key.toml | #8ab2ff | — |
| entity.name.section.toml, punctuation.definition.table.toml | #74c8e8 | — |
| entity.name.section.group-title.ini, keyword.other.definition.ini | #74c8e8 | — |
| keyword.other.special-method.dockerfile, keyword.control.dockerfile | #b6b8f8 | italic |
| entity.name.function.target.makefile, entity.name.function.makefile | #6f9dff | — |
| entity.name.type.terraform, entity.name.label.terraform, storage.type.terraform | #74c8e8 | — |
| keyword.other.definition.ini, variable.other.env, source.env variable | #8ab2ff | — |
| invalid, invalid.illegal | #f07d94 | italic |
| invalid.deprecated | #e8b675 | strikethrough |
| constant.other.placeholder, constant.other.color | #f2cd9c | — |
| entity.name.label, entity.name.goto-label | #f07d94 | — |
| string.unquoted.key | #8ab2ff | — |
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}!`;
}