super-cool-theme
Publisher: plus0-waterThemes in package: 1
super cool theme
super cool theme
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 | #A0B0C0 | italic |
| keyword | #FF75B5 | — |
| keyword.control, keyword.operator.new | #FF75B5 | — |
| keyword.operator | #FF9AC1 | — |
| keyword.operator.logical, keyword.operator.comparison | #FF9AC1 | — |
| keyword.operator.misc, keyword.operator.sigil | #FF9AC1 | — |
| storage | #BD93F9 | — |
| constant | #FFAA44 | — |
| constant.character.escape | #45A9F9 | — |
| variable | #F3F4F6 | — |
| variable.parameter | #6FC1FF | — |
| meta.object-binding-pattern-variable.js variable | #A78BFA | — |
| variable.other.constant, variable.language.this, variable.interpolation | #FFB86C | — |
| variable.other.object | #19f9d8 | — |
| variable.other.property | #19f9d8 | — |
| string | #A9E34B | — |
| punctuation.definition.template-expression | #A78BFA | — |
| support | #A78BFA | — |
| support.class | #A78BFA | — |
| support.type.object.module.js | #B084EB | — |
| support.function | #6FC1FF | — |
| entity.name.function | #6FC1FF | — |
| entity.other.inherited-class | #FF9AC1 | — |
| entity.name.tag.yaml | #19f9d8 | — |
| meta.decorator punctuation.decorator | #F72585 | — |
| meta.decorator variable | #F72585 | — |
| keyword.other.special-method | #45A9F9 | — |
| keyword.control.at-rule | #B084EB | — |
| keyword.other.important | #FF4B82 | — |
| variable.interpolation | #FF75B5 | — |
| entity.name.type | #19f9d8 | italic |
| meta.source.handlebars entity.name.tag | #6FC1FF | — |
| punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag | #A78BFA | italic |
| entity.name.function.expression | #FF75B5 | — |
| entity.unescaped.expression | #B084EB | — |
| constant.other.symbol | #19f9d8 | — |
| entity.expression variable.parameter.name | #A78BFA | — |
| entity.expression variable.parameter.value | #6FC1FF | — |
| entity.expression support.function.builtin | #FF9AC1 | — |
| entity.name.tag.html | #A78BFA | — |
| entity.other.attribute-name.handlebars | #A78BFA | — |
| support.class.component | #FF75B5 | italic |
| meta.tag.js entity.name.tag | #A78BFA | — |
| entity.other.attribute-name | #A78BFA | — |
| markup.bold | #A78BFA | — |
| punctuation.definition.bold.markdown | #A78BFA | — |
| markup.changed | #FF75B5 | — |
| markup.deleted | #FF2C6D | — |
| markup.italic | #FF9AC1 | italic |
| punctuation.definition.italic.markdown | #FF75B5 | italic |
| markup.inserted | #19f9d8 | — |
| punctuation.definition.heading | #19f9d8 | — |
| entity.name.section.markdown | #9CA3AF | — |
| markup.quote | #A78BFA | — |
| markup.inline.raw | #19f9d8 | italic |
| beginning.punctuation.definition.list | #FF75B5 | — |
| markup.fenced_code.block.markdown punctuation.definition.markdown | #9CA3AF | — |
| fenced_code.block.language | #9CA3AF | italic |
| string.other.link | #9CA3AF | — |
| meta.link.inline.markdown | #45A9F9 | italic |
| text.html.markdown punctuation.definition.string | #A78BFA | — |
| entity.name.type.class.js | #6FC1FF | — |
| keyword.control.as.js | #FF9AC1 | — |
| keyword.control.from.js | #FF9AC1 | — |
| keyword.control.export.js | #8B8B8B | — |
| variable.language.this.js | — | italic |
| support.class.console.js | — | italic |
| entity.name.tag.js, support.class.component.js | #FF2C6D | — |
| variable.language.super.js | #45A9F9 | — |
| meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade | #FF2C6D | — |
| entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.tag.localname.xml | #FF2C6D | — |
| entity.name.tag.xml, meta.tag.xml | #FF2C6D | — |
| source.vue, entity.name.tag.pug, meta.tag.other | #FF2C6D | — |
| text.pug | #F3F4F6 | — |
| entity.name.tag.css | #FF2C6D | — |
| support.type.property-name.css | #19f9d8 | — |
| variable.scss | #FF9AC1 | — |
| entity.name.tag.reference.scss | #FF2C6D | — |
| keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css | #A78BFA | — |
| string.regexp | #6FC1FF | — |
| string.regexp keyword, string.regexp keyword.control | #FF75B5 | — |
| string.regexp keyword.operator | #FF9AC1 | — |
| comment.block.documentation | #A0B0C0 | — |
| entity.name.type.instance.jsdoc punctuation.definition | #A78BFA | italic |
| entity.name.type.instance.jsdoc | #CDCDCD | italic |
| comment.block storage | #A78BFA | — |
| comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string | #FF9AC1 | — |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
| meta.type.annotation.ts, meta.type.annotation.tsx | #19f9d8 | italic |
| keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx | #FF4B82 | — |
| storage.type.ts, storage.type.tsx | #FF75B5 | italic |
| entity.name.type.interface.ts, entity.name.type.interface.tsx | #19f9d8 | bold |
| entity.name.type.enum.ts, entity.name.type.enum.tsx | #FF4B82 | bold |
| entity.name.type.class.ts, entity.name.type.class.tsx | #A78BFA | bold |
| entity.name.type.alias.ts, entity.name.type.alias.tsx | #19f9d8 | — |
| entity.name.type.generic.ts, entity.name.type.generic.tsx | #FF9AC1 | italic |
| keyword.operator.optional.ts, keyword.operator.optional.tsx | #FF75B5 | — |
| punctuation.accessor.ts, punctuation.accessor.tsx | #FF4B82 | — |
| keyword.operator.readonly.ts, keyword.operator.readonly.tsx | #FF75B5 | italic |
| storage.modifier.ts, storage.modifier.tsx | #FF75B5 | — |
| meta.method.declaration.ts entity.name.function, meta.method.declaration.tsx entity.name.function | #6FC1FF | bold |
| meta.function.arrow.ts, meta.function.arrow.tsx | #FF75B5 | — |
| entity.name.function.ts, entity.name.function.tsx | #6FC1FF | — |
| variable.other.property.ts, variable.other.property.tsx | #72A5D9 | — |
| meta.object-literal.key.ts, meta.object-literal.key.tsx | #19f9d8 | — |
| keyword.operator.type.keyof.ts, keyword.operator.type.keyof.tsx | #FF75B5 | italic |
| keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.tsx | #FF75B5 | italic |
| punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts | #FF9AC1 | — |
| support.type.primitive.ts, support.type.primitive.tsx | #FF4B82 | — |
| keyword.operator.assignment.ts, keyword.operator.assignment.tsx | #FF75B5 | — |
| meta.decorator.ts, meta.decorator.tsx | #A78BFA | — |
| punctuation.decorator.ts, punctuation.decorator.tsx | #A78BFA | — |
| punctuation.terminator.statement | #E5E7EB | — |
| punctuation.accessor | #FF4B82 | — |
| punctuation.definition.block | #FF75B5 | — |
| punctuation.definition.parameters | #A78BFA | — |
| punctuation.definition.group | #6FC1FF | — |
| punctuation.section.group | #6FC1FF | — |
| punctuation.definition.arguments | #A78BFA | — |
| punctuation.section.block | #FF75B5 | — |
| punctuation.section.parens | #A78BFA | — |
| punctuation.section.brackets | #6FC1FF | — |
| punctuation.section.braces | #FF75B5 | — |
| punctuation.definition.function | #6FC1FF | — |
| punctuation.definition.variable | #9CA3AF | — |
| keyword.operator.ternary | #FF75B5 | — |
| keyword.operator.spread | #FF75B5 | — |
| keyword.operator.rest | #FF75B5 | — |
| keyword.operator.increment, keyword.operator.decrement | #FF9AC1 | — |
| keyword.operator.bitwise | #A78BFA | — |
| meta.brace.curly | #FF75B5 | — |
| meta.brace.round | #A78BFA | — |
| meta.brace.square | #6FC1FF | — |
| meta.delimiter.comma | #9CA3AF | — |
| meta.delimiter.semicolon | #E5E7EB | — |
| meta.embedded.expression | #FF9AC1 | — |
| meta.template.expression | #FF9AC1 | — |
| meta.function-call | #6FC1FF | — |
| meta.function-call entity.name.function | #A78BFA | bold |
| meta.import | #8B8B8B | — |
| meta.export | #B084EB | — |
| meta.require | #B084EB | — |
| support.constant | #FFB86C | — |
| support.variable | #9CA3AF | — |
| support.other.variable | #9CA3AF | — |
| support.type.builtin | #A78BFA | italic |
| support.type.exception | #FF4B82 | — |
| entity.other.attribute-name.class | #A78BFA | — |
| entity.other.attribute-name.id | #6FC1FF | — |
| entity.other.attribute-name.pseudo-class | #FF9AC1 | — |
| entity.other.attribute-name.pseudo-element | #FF75B5 | — |
| entity.name.class | #A78BFA | bold |
| entity.name.module | #B084EB | — |
| entity.name.namespace | #B084EB | — |
| entity.name.variable | #9CA3AF | — |
| entity.name.constant | #FF9AC1 | — |
| entity.name.label | #A78BFA | — |
| variable.other.readwrite | #19f9d8 | — |
| variable.other.member | #72A5D9 | — |
| variable.other.enummember | #19f9d8 | — |
| variable.other.assignment | #2DD4BF | — |
| storage.type.function | #FF75B5 | italic |
| storage.type.class | #FF75B5 | italic |
| storage.type.interface | #FF75B5 | italic |
| storage.type.enum | #FF75B5 | italic |
| storage.type.namespace | #FF75B5 | italic |
| storage.type.module | #FF75B5 | italic |
| storage.modifier.public | #19f9d8 | — |
| storage.modifier.private | #FF4B82 | — |
| storage.modifier.protected | #FF9AC1 | — |
| storage.modifier.static | #A78BFA | — |
| storage.modifier.readonly | #FF75B5 | italic |
| storage.modifier.abstract | #FF75B5 | italic |
| storage.modifier.async | #B084EB | italic |
| constant.numeric.decimal | #FFAA44 | — |
| constant.numeric.binary | #FFAA44 | — |
| constant.numeric.octal | #FFAA44 | — |
| constant.numeric.hex | #FFAA44 | — |
| constant.numeric.float | #FFAA44 | — |
| constant.other.placeholder | #A9E34B | — |
| constant.other.caps | #2DD4BF | — |
| constant.other.color | #19f9d8 | — |
| string.template | #19f9d8 | — |
| string.interpolated | #19f9d8 | — |
| string.other.link | #6FC1FF | underline |
| markup.underline.link | #6FC1FF | underline |
| markup.heading.1 | #FF4B82 | bold |
| markup.heading.2 | #FF75B5 | bold |
| markup.heading.3 | #A78BFA | bold |
| markup.heading.4 | #19f9d8 | bold |
| markup.heading.5 | #6FC1FF | bold |
| markup.heading.6 | #FF9AC1 | bold |
| markup.list.numbered | #A78BFA | — |
| markup.list.unnumbered | #FF75B5 | — |
| markup.other.table | #9CA3AF | — |
| markup.raw.block | #19f9d8 | — |
| markup.raw.inline | #19f9d8 | — |
| text.html.derivative | #9CA3AF | — |
| source.css entity.name.tag | #FF2C6D | — |
| source.css entity.other.attribute-name.class | #A78BFA | — |
| source.css entity.other.attribute-name.id | #6FC1FF | — |
| source.css property-name | #19f9d8 | — |
| source.css property-value | #A78BFA | — |
| source.css support.type.property-name | #19f9d8 | — |
| source.css support.constant.property-value | #A78BFA | — |
| source.css constant.numeric | #A78BFA | — |
| source.css keyword.other.unit | #A78BFA | — |
| meta.structure.dictionary.key.json string.quoted.double.json | #19f9d8 | — |
| meta.structure.dictionary.value.json string.quoted.double.json | #A78BFA | — |
| meta.structure.dictionary.value.json constant.numeric.json | #A78BFA | — |
| meta.structure.dictionary.value.json constant.language.json | #A78BFA | — |
| support.type.property-name.json | #19f9d8 | — |
| string.quoted.double.json | #A78BFA | — |
| meta.object-literal.key.json string.quoted.double | #19f9d8 | — |
| punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json | #19f9d8 | — |
| entity.name.tag.yaml | #19f9d8 | — |
| string.unquoted.plain.out.yaml | #A78BFA | — |
| string.quoted.single.yaml, string.quoted.double.yaml | #A78BFA | — |
| constant.numeric.yaml | #A78BFA | — |
| constant.language.yaml | #A78BFA | — |
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}!`;
}