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 | #e2d6e8 | — |
| comment, punctuation.definition.comment, unused.comment, wildcard.comment | #8c7d98 | italic |
| comment.block.documentation, comment.line.documentation, string.quoted.docstring, comment.block.documentation punctuation.definition.comment | #9787a3 | 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 | #c78bf5 | italic |
| keyword.codetag.notation, comment.notation | #f5cd6b | bold |
| keyword, keyword.other, storage.type.function.arrow | #c78bf5 | — |
| 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 | #d29bf9 | italic |
| storage, storage.type, storage.modifier, keyword.other.important, keyword.other.unit, keyword.other.template, keyword.other.substitution | #c78bf5 | — |
| variable.language.this, variable.language.self, variable.language.super, variable.language.special, keyword.other.this, constant.language.this | #c78bf5 | italic |
| keyword.operator.new, keyword.operator.expression, keyword.operator.wordlike | #d29bf9 | — |
| entity.name.function, support.function, meta.function-call.generic, meta.definition.method entity.name.function, entity.name.function.member | #f2a25c | — |
| meta.function-call entity.name.function, variable.function, support.function.builtin, meta.method-call entity.name.function | #f2a25c | — |
| entity.name.function.preprocessor, entity.name.function.macro | #f2a25c | italic |
| meta.decorator, entity.name.function.decorator, punctuation.decorator, meta.decorator variable.other, meta.attribute, entity.name.function.attribute | #f5cd6b | italic |
| variable, variable.other, variable.other.readwrite, meta.definition.variable | #e2d6e8 | — |
| variable.other.constant, variable.other.enummember, entity.name.constant, constant.other.caps, variable.other.readonly | #f5cd6b | — |
| variable.parameter, meta.parameter, meta.function.parameters variable.other, variable.other.jsdoc | #b7a9c4 | 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 | #f7b478 | — |
| support.type.property-name, meta.mapping.key string, entity.name.tag.yaml | #f7b478 | — |
| support.variable, variable.language, support.constant.dom | #f5cd6b | — |
| entity.name.type, support.type, entity.name.type.alias, meta.type.annotation entity.name.type, storage.type.primitive, support.class.builtin | #6fc9e8 | — |
| entity.name.class, entity.name.type.class, support.class, meta.definition.class entity.name, entity.other.inherited-class, entity.name.type.struct | #6fc9e8 | — |
| entity.name.type.interface, entity.name.interface, meta.interface entity.name | #84d5f0 | — |
| entity.name.type.enum, entity.name.enum, storage.type.enum | #6fc9e8 | — |
| entity.name.type.parameter, meta.type.parameters entity.name.type, storage.type.generic | #6fc9e8 | italic |
| entity.name.namespace, entity.name.type.namespace, entity.name.type.module, entity.name.module, entity.name.scope-resolution, support.module | #6fc9e8 | — |
| string, string.quoted, string.template, punctuation.definition.string | #7fd6b4 | — |
| constant.character.escape, string.regexp constant.character.escape, constant.other.character-class.escape | #9fe3c8 | — |
| punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line | #d29bf9 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #f5cd6b | — |
| constant.language.boolean, constant.language.true, constant.language.false | #f5cd6b | — |
| constant.language.null, constant.language.undefined, constant.language.nil, constant.language.none | #f5cd6b | — |
| constant.language, support.constant, constant.other | #f5cd6b | — |
| string.regexp, string.regexp punctuation.definition.string, constant.other.character-class.set.regexp | #f58fa8 | — |
| keyword.operator.or.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp | #9fe3c8 | — |
| 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 | #a998b4 | — |
| punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.dict, punctuation.section | #9a89a6 | — |
| entity.name.tag, meta.tag, punctuation.definition.tag | #f26b8a | — |
| entity.name.tag.js.jsx, entity.name.tag.tsx, support.class.component | #6fc9e8 | — |
| entity.other.attribute-name, meta.attribute.class, meta.attribute.id, entity.other.attribute-name.html | #f5cd6b | italic |
| meta.attribute string, meta.tag string.quoted, string.quoted.double.html | #7fd6b4 | — |
| meta.tag.sgml, entity.name.tag.doctype, meta.tag.metadata.doctype | #8c7d98 | 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 | #6fc9e8 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less | #f7b478 | — |
| support.constant.property-value.css, meta.property-value.css | #f5cd6b | — |
| keyword.other.unit.css, support.function.misc.css, support.function.transform.css | #f5cd6b | — |
| variable.scss, variable.other.less, variable.declaration.scss | #f5cd6b | — |
| keyword.control.at-rule.css, keyword.control.at-rule.scss, punctuation.definition.keyword.css | #d29bf9 | — |
| support.type.property-name.json | #f7b478 | — |
| source.json meta.structure.dictionary.json support.type.property-name.json | #f7b478 | — |
| punctuation.definition.dictionary.json, punctuation.separator.dictionary.key-value.json | #9a89a6 | — |
| entity.name.tag.yaml, support.type.property-name.yaml | #f7b478 | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml | #f5cd6b | — |
| string.unquoted.plain.out.yaml, string.unquoted.block.yaml | #7fd6b4 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #f2a25c | bold |
| markup.bold, markup.bold string | #f5cd6b | bold |
| markup.italic, markup.italic string | #c78bf5 | italic |
| markup.strikethrough | #8c7d98 | strikethrough |
| markup.underline.link, string.other.link, constant.other.reference.link.markdown | #e07bb0 | underline |
| string.other.link.title.markdown, meta.link.inline.markdown | #f7b478 | — |
| markup.inline.raw, markup.fenced_code, markup.raw.block | #7fd6b4 | — |
| markup.quote, beginning.punctuation.definition.quote.markdown | #8c7d98 | italic |
| beginning.punctuation.definition.list.markdown, markup.list punctuation.definition | #f26b8a | — |
| meta.separator.markdown | #9a89a6 | — |
| markup.inserted, meta.diff.header.to-file | #7fd6b4 | — |
| markup.deleted, meta.diff.header.from-file | #f26b8a | — |
| markup.changed | #f5cd6b | — |
| meta.diff.header, meta.diff.range | #f2a25c | — |
| variable.other.normal.shell, variable.other.special.shell, punctuation.definition.variable.shell | #f5cd6b | — |
| support.function.builtin.shell, keyword.command.shell | #f2a25c | — |
| constant.other.option, string.unquoted.argument.shell | #b7a9c4 | — |
| variable.parameter.function.language.special.self.python, variable.language.special.self.python | #c78bf5 | italic |
| entity.name.function.decorator.python, meta.function.decorator.python support.type | #f5cd6b | italic |
| meta.fstring.python, string.interpolated.python | #7fd6b4 | — |
| entity.name.package.go, keyword.package.go | #6fc9e8 | — |
| support.type.error.go | #f26b8a | — |
| storage.modifier.lifetime.rust, entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust | #f26b8a | italic |
| entity.name.function.macro.rust, support.macro.rust | #f2a25c | — |
| meta.attribute.rust, meta.annotation.rust | #f5cd6b | italic |
| storage.type.annotation.java, punctuation.definition.annotation.java | #f5cd6b | italic |
| storage.type.annotation.kotlin, meta.annotation.kotlin | #f5cd6b | italic |
| storage.modifier.attribute.swift, keyword.other.declaration-specifier.swift | #f5cd6b | — |
| variable.other.php, punctuation.definition.variable.php | #e2d6e8 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.embedded.block.php | #f26b8a | — |
| constant.other.symbol.ruby, constant.language.symbol.ruby, constant.language.symbol.hashkey.ruby | #f5cd6b | — |
| punctuation.section.embedded.ruby, meta.embedded.line.ruby | #d29bf9 | — |
| keyword.control.directive, punctuation.definition.directive, meta.preprocessor | #d29bf9 | italic |
| meta.interpolation.cs, punctuation.definition.interpolation.cs | #d29bf9 | — |
| storage.type.annotation.dart, meta.declaration.dart | #f5cd6b | — |
| keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql | #d29bf9 | italic |
| support.function.aggregate.sql, support.function.scalar.sql | #f2a25c | — |
| entity.name.function.sql, constant.other.database-name.sql, constant.other.table-name.sql | #6fc9e8 | — |
| support.type.graphql, entity.name.type.graphql | #6fc9e8 | — |
| variable.graphql, string.unquoted.alias.graphql | #f7b478 | — |
| entity.name.function.directive.graphql, keyword.other.directive.graphql | #f5cd6b | — |
| support.type.property-name.toml, variable.key.toml | #f7b478 | — |
| entity.name.section.toml, punctuation.definition.table.toml | #6fc9e8 | — |
| entity.name.section.group-title.ini, keyword.other.definition.ini | #6fc9e8 | — |
| keyword.other.special-method.dockerfile, keyword.control.dockerfile | #d29bf9 | italic |
| entity.name.function.target.makefile, entity.name.function.makefile | #f2a25c | — |
| entity.name.type.terraform, entity.name.label.terraform, storage.type.terraform | #6fc9e8 | — |
| keyword.other.definition.ini, variable.other.env, source.env variable | #f7b478 | — |
| invalid, invalid.illegal | #f26b8a | italic |
| invalid.deprecated | #f5cd6b | strikethrough |
| constant.other.placeholder, constant.other.color | #9fe3c8 | — |
| entity.name.label, entity.name.goto-label | #f26b8a | — |
| string.unquoted.key | #f7b478 | — |
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 | #cdd1ef | — |
| comment, punctuation.definition.comment, unused.comment, wildcard.comment | #7d85a9 | italic |
| comment.block.documentation, comment.line.documentation, string.quoted.docstring, comment.block.documentation punctuation.definition.comment | #8b93bd | 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 | #bb8cff | italic |
| keyword.codetag.notation, comment.notation | #f0b96f | bold |
| keyword, keyword.other, storage.type.function.arrow | #bb8cff | — |
| 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 | #c9a3ff | italic |
| storage, storage.type, storage.modifier, keyword.other.important, keyword.other.unit, keyword.other.template, keyword.other.substitution | #bb8cff | — |
| variable.language.this, variable.language.self, variable.language.super, variable.language.special, keyword.other.this, constant.language.this | #bb8cff | italic |
| keyword.operator.new, keyword.operator.expression, keyword.operator.wordlike | #c9a3ff | — |
| entity.name.function, support.function, meta.function-call.generic, meta.definition.method entity.name.function, entity.name.function.member | #7aa2ff | — |
| meta.function-call entity.name.function, variable.function, support.function.builtin, meta.method-call entity.name.function | #7aa2ff | — |
| entity.name.function.preprocessor, entity.name.function.macro | #7aa2ff | italic |
| meta.decorator, entity.name.function.decorator, punctuation.decorator, meta.decorator variable.other, meta.attribute, entity.name.function.attribute | #ffb37c | italic |
| variable, variable.other, variable.other.readwrite, meta.definition.variable | #cdd1ef | — |
| variable.other.constant, variable.other.enummember, entity.name.constant, constant.other.caps, variable.other.readonly | #ffb37c | — |
| variable.parameter, meta.parameter, meta.function.parameters variable.other, variable.other.jsdoc | #9dc9d6 | 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 | #93b8ff | — |
| support.type.property-name, meta.mapping.key string, entity.name.tag.yaml | #93b8ff | — |
| support.variable, variable.language, support.constant.dom | #ffb37c | — |
| entity.name.type, support.type, entity.name.type.alias, meta.type.annotation entity.name.type, storage.type.primitive, support.class.builtin | #6ad4e0 | — |
| entity.name.class, entity.name.type.class, support.class, meta.definition.class entity.name, entity.other.inherited-class, entity.name.type.struct | #6ad4e0 | — |
| entity.name.type.interface, entity.name.interface, meta.interface entity.name | #7ddce7 | — |
| entity.name.type.enum, entity.name.enum, storage.type.enum | #6ad4e0 | — |
| entity.name.type.parameter, meta.type.parameters entity.name.type, storage.type.generic | #6ad4e0 | italic |
| entity.name.namespace, entity.name.type.namespace, entity.name.type.module, entity.name.module, entity.name.scope-resolution, support.module | #6ad4e0 | — |
| string, string.quoted, string.template, punctuation.definition.string | #7fd88f | — |
| constant.character.escape, string.regexp constant.character.escape, constant.other.character-class.escape | #ffcda3 | — |
| punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line | #c9a3ff | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #ffb37c | — |
| constant.language.boolean, constant.language.true, constant.language.false | #ffb37c | — |
| constant.language.null, constant.language.undefined, constant.language.nil, constant.language.none | #ffb37c | — |
| constant.language, support.constant, constant.other | #ffb37c | — |
| string.regexp, string.regexp punctuation.definition.string, constant.other.character-class.set.regexp | #ff9db8 | — |
| keyword.operator.or.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp | #ffcda3 | — |
| 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 | #97a6db | — |
| punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.dict, punctuation.section | #8a90b8 | — |
| entity.name.tag, meta.tag, punctuation.definition.tag | #ff7a9c | — |
| entity.name.tag.js.jsx, entity.name.tag.tsx, support.class.component | #6ad4e0 | — |
| entity.other.attribute-name, meta.attribute.class, meta.attribute.id, entity.other.attribute-name.html | #ffb37c | italic |
| meta.attribute string, meta.tag string.quoted, string.quoted.double.html | #7fd88f | — |
| meta.tag.sgml, entity.name.tag.doctype, meta.tag.metadata.doctype | #7d85a9 | 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 | #6ad4e0 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less | #93b8ff | — |
| support.constant.property-value.css, meta.property-value.css | #ffb37c | — |
| keyword.other.unit.css, support.function.misc.css, support.function.transform.css | #ffb37c | — |
| variable.scss, variable.other.less, variable.declaration.scss | #ffb37c | — |
| keyword.control.at-rule.css, keyword.control.at-rule.scss, punctuation.definition.keyword.css | #c9a3ff | — |
| support.type.property-name.json | #93b8ff | — |
| source.json meta.structure.dictionary.json support.type.property-name.json | #93b8ff | — |
| punctuation.definition.dictionary.json, punctuation.separator.dictionary.key-value.json | #8a90b8 | — |
| entity.name.tag.yaml, support.type.property-name.yaml | #93b8ff | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml | #ffb37c | — |
| string.unquoted.plain.out.yaml, string.unquoted.block.yaml | #7fd88f | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #7aa2ff | bold |
| markup.bold, markup.bold string | #ffb37c | bold |
| markup.italic, markup.italic string | #bb8cff | italic |
| markup.strikethrough | #7d85a9 | strikethrough |
| markup.underline.link, string.other.link, constant.other.reference.link.markdown | #7c8cf8 | underline |
| string.other.link.title.markdown, meta.link.inline.markdown | #93b8ff | — |
| markup.inline.raw, markup.fenced_code, markup.raw.block | #7fd88f | — |
| markup.quote, beginning.punctuation.definition.quote.markdown | #7d85a9 | italic |
| beginning.punctuation.definition.list.markdown, markup.list punctuation.definition | #ff7a9c | — |
| meta.separator.markdown | #8a90b8 | — |
| markup.inserted, meta.diff.header.to-file | #6fd8a4 | — |
| markup.deleted, meta.diff.header.from-file | #ff6b81 | — |
| markup.changed | #f0b96f | — |
| meta.diff.header, meta.diff.range | #7aa2ff | — |
| variable.other.normal.shell, variable.other.special.shell, punctuation.definition.variable.shell | #ffb37c | — |
| support.function.builtin.shell, keyword.command.shell | #7aa2ff | — |
| constant.other.option, string.unquoted.argument.shell | #9dc9d6 | — |
| variable.parameter.function.language.special.self.python, variable.language.special.self.python | #bb8cff | italic |
| entity.name.function.decorator.python, meta.function.decorator.python support.type | #ffb37c | italic |
| meta.fstring.python, string.interpolated.python | #7fd88f | — |
| entity.name.package.go, keyword.package.go | #6ad4e0 | — |
| support.type.error.go | #ff7a9c | — |
| storage.modifier.lifetime.rust, entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust | #ff7a9c | italic |
| entity.name.function.macro.rust, support.macro.rust | #7aa2ff | — |
| meta.attribute.rust, meta.annotation.rust | #ffb37c | italic |
| storage.type.annotation.java, punctuation.definition.annotation.java | #ffb37c | italic |
| storage.type.annotation.kotlin, meta.annotation.kotlin | #ffb37c | italic |
| storage.modifier.attribute.swift, keyword.other.declaration-specifier.swift | #ffb37c | — |
| variable.other.php, punctuation.definition.variable.php | #cdd1ef | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.embedded.block.php | #ff7a9c | — |
| constant.other.symbol.ruby, constant.language.symbol.ruby, constant.language.symbol.hashkey.ruby | #ffb37c | — |
| punctuation.section.embedded.ruby, meta.embedded.line.ruby | #c9a3ff | — |
| keyword.control.directive, punctuation.definition.directive, meta.preprocessor | #c9a3ff | italic |
| meta.interpolation.cs, punctuation.definition.interpolation.cs | #c9a3ff | — |
| storage.type.annotation.dart, meta.declaration.dart | #ffb37c | — |
| keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql | #c9a3ff | italic |
| support.function.aggregate.sql, support.function.scalar.sql | #7aa2ff | — |
| entity.name.function.sql, constant.other.database-name.sql, constant.other.table-name.sql | #6ad4e0 | — |
| support.type.graphql, entity.name.type.graphql | #6ad4e0 | — |
| variable.graphql, string.unquoted.alias.graphql | #93b8ff | — |
| entity.name.function.directive.graphql, keyword.other.directive.graphql | #ffb37c | — |
| support.type.property-name.toml, variable.key.toml | #93b8ff | — |
| entity.name.section.toml, punctuation.definition.table.toml | #6ad4e0 | — |
| entity.name.section.group-title.ini, keyword.other.definition.ini | #6ad4e0 | — |
| keyword.other.special-method.dockerfile, keyword.control.dockerfile | #c9a3ff | italic |
| entity.name.function.target.makefile, entity.name.function.makefile | #7aa2ff | — |
| entity.name.type.terraform, entity.name.label.terraform, storage.type.terraform | #6ad4e0 | — |
| keyword.other.definition.ini, variable.other.env, source.env variable | #93b8ff | — |
| invalid, invalid.illegal | #ff6b81 | italic |
| invalid.deprecated | #f0b96f | strikethrough |
| constant.other.placeholder, constant.other.color | #ffcda3 | — |
| entity.name.label, entity.name.goto-label | #ff7a9c | — |
| string.unquoted.key | #93b8ff | — |
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}!`;
}