Zeit Theme
Publisher: zeit-vuThemes in package: 1
A modular VS Code theme build with Bun
A modular VS Code theme build with Bun
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 |
|---|---|---|
| text.html.vue meta.tag.custom entity.name.tag | #D600FF | italic |
| text.html.vue meta.tag.other.unrecognized entity.name.tag | #D600FF | italic |
| text.html.vue meta.attribute.directive entity.other.attribute-name, text.html.vue meta.attribute.directive keyword.control | #ffae00 | italic |
| text.html.vue meta.attribute punctuation.separator | #8Afc5d | |
| text.html.vue meta.attribute punctuation.attribute-shorthand | #8Afc5d | italic |
| text.html.vue meta.attribute entity.other.attribute-name | #cc8a00 | italic |
| text.html.vue string | #ff2a6d | italic |
| text.html.vue variable | #00aaff | |
| text.html.vue | #cc2055 | italic |
| text.html.vue entity.name.tag, text.html.vue keyword.operator | #8Afc5d | |
| text.html.vue entity.name.function | #ffae00 | italic |
| text.html.vue punctuation.definition.tag | #ffffff | |
| text.html.vue constant | #D600FF | |
| text.html.vue comment | #008ecc | italic |
| source.css | #cc2055 | italic |
| source.css.scss entity.other.attribute-name | #00aaff | |
| source.css.scss entity.other.attribute-name.class | #00aaff | italic |
| source.css.scss entity.other.attribute-name.id | #D600FF | italic |
| source.css.scss entity.name.tag | #ff2a6d | |
| source.css.scss entity.name.tag.reference | #8Afc5d | italic |
| source.css.scss , source.css.scss string, source.css.scss punctuation.definition | #cc2055 | italic |
| source.css.scss keyword.control.at-rule, source.css.scss support.function, source.css.scss support.type.property-name | #ffae00 | |
| source.css.scss comment, source.css.scss keyword.other.important | #008ecc | italic |
| source.css.scss punctuation.terminator | #008ecc | |
| source.css.scss support.constant | #ff2a6d | italic |
| source.css.scss constant.numeric, source.css.scss keyword.other.unit | #8Afc5d | italic |
| source.css.scss variable | #8Afc5d | |
| source.ts keyword.control | #8Afc5d | italic |
| source.ts keyword.control.import, source.ts keyword.control.from, source.ts keyword.control.export | #8Afc5d | |
| source.ts keyword.control.type, source.ts keyword.control.default | #D600FF | italic |
| source.ts keyword.control.flow | #05d9e7 | italic |
| source.ts variable | #00aaff | |
| source.ts variable.other.object | #ff2a6d | italic |
| source.ts constant | #8Afc5d | |
| source.ts constant.language | #05d9e7 | italic |
| source.ts , source.ts string | #cc2055 | italic |
| source.ts punctuation.terminator | #008ecc | |
| source.ts punctuation.accessor | #8Afc5d | |
| source.ts keyword.operator | #8Afc5d | italic |
| source.ts storage.modifier | #05d9e7 | italic |
| source.ts string.regexp, source.ts comment | #5ACC3A | italic |
| source.ts support.type, source.ts support.class, source.ts storage.type, source.ts entity.name.type | #D600FF | italic |
| source.ts entity.name.function, source.ts meta.object-literal.key | #ffae00 | italic |
| source.tsx keyword.control | #8Afc5d | italic |
| source.tsx keyword.control.import, source.tsx keyword.control.from, source.tsx keyword.control.export | #8Afc5d | |
| source.tsx keyword.control.type, source.tsx keyword.control.default | #D600FF | italic |
| source.tsx keyword.control.flow | #05d9e7 | italic |
| source.tsx variable | #00aaff | |
| source.tsx variable.other.object | #ff2a6d | italic |
| source.tsx constant | #8Afc5d | |
| source.tsx constant.language | #05d9e7 | italic |
| source.tsx , source.tsx string | #cc2055 | italic |
| source.tsx punctuation.terminator | #008ecc | |
| source.tsx punctuation.accessor | #8Afc5d | |
| source.tsx keyword.operator | #8Afc5d | italic |
| source.tsx storage.modifier | #05d9e7 | italic |
| source.tsx string.regexp, source.tsx comment | #5ACC3A | italic |
| source.tsx support.type, source.tsx support.class, source.tsx storage.type, source.tsx entity.name.type | #D600FF | italic |
| source.tsx entity.name.function, source.tsx meta.object-literal.key | #ffae00 | italic |
| source.jsx keyword.control | #8Afc5d | italic |
| source.jsx keyword.control.import, source.jsx keyword.control.from, source.jsx keyword.control.export | #8Afc5d | |
| source.jsx keyword.control.type, source.jsx keyword.control.default | #D600FF | italic |
| source.jsx keyword.control.flow | #05d9e7 | italic |
| source.jsx variable | #00aaff | |
| source.jsx variable.other.object | #ff2a6d | italic |
| source.jsx constant | #8Afc5d | |
| source.jsx constant.language | #05d9e7 | italic |
| source.jsx , source.jsx string | #cc2055 | italic |
| source.jsx punctuation.terminator | #008ecc | |
| source.jsx punctuation.accessor | #8Afc5d | |
| source.jsx keyword.operator | #8Afc5d | italic |
| source.jsx storage.modifier | #05d9e7 | italic |
| source.jsx string.regexp, source.jsx comment | #5ACC3A | italic |
| source.jsx support.type, source.jsx support.class, source.jsx storage.type, source.jsx entity.name.type | #D600FF | italic |
| source.jsx entity.name.function, source.jsx meta.object-literal.key | #ffae00 | italic |
| source.js keyword.control | #8Afc5d | italic |
| source.js keyword.control.import, source.js keyword.control.from, source.js keyword.control.export | #8Afc5d | |
| source.js keyword.control.type, source.js keyword.control.default | #D600FF | italic |
| source.js keyword.control.flow | #05d9e7 | italic |
| source.js variable | #00aaff | |
| source.js variable.other.object | #ff2a6d | italic |
| source.js constant | #8Afc5d | |
| source.js constant.language | #05d9e7 | italic |
| source.js , source.js string | #cc2055 | italic |
| source.js punctuation.terminator | #008ecc | |
| source.js punctuation.accessor | #8Afc5d | |
| source.js keyword.operator | #8Afc5d | italic |
| source.js storage.modifier | #05d9e7 | italic |
| source.js string.regexp, source.js comment | #5ACC3A | italic |
| source.js support.type, source.js support.class, source.js storage.type, source.js entity.name.type | #D600FF | italic |
| source.js entity.name.function, source.js meta.object-literal.key | #ffae00 | italic |
| source.json | #cc2055 | italic |
| source.json support.type | #D600FF | italic |
| source.json punctuation.separator | #8Afc5d | |
| source.json string | #8Afc5d | italic |
| source.json constant.numeric | #ffae00 | |
| source.json constant.language | #ff2a6d | |
| source.env comment | #cc8a00 | italic |
| source.env comment punctuation.definition.comment | #ff2a6d | |
| source.env | #8Afc5d | italic |
| source.env variable | #D600FF | |
| source.env keyword.operator.assignment | #8Afc5d | |
| source.env string | #00aaff | italic |
| source.ignore | #00aaff | |
| source.ignore comment | #cc8a00 | italic |
| text.xml | #cc8a00 | italic |
| text.xml punctuation.definition.tag | #ffffff | |
| text.xml entity.name.tag, text.xml meta.tag | #00aaff | |
| text.xml entity.other.attribute-name | #8Afc5d | |
| text.xml string | #cc2055 | italic |
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}!`;
}