Brume Frost Theme
Publisher: vkvikramThemes in package: 6
A frost-tinted color palette — 6 variants, icy glass aesthetic for VS Code
A frost-tinted color palette — 6 variants, icy glass aesthetic for VS Code
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, comment.line, comment.block | #404e65 | italic |
| comment.block.documentation | #404e65 | italic |
| comment.block.documentation storage.type.class | #404e65 | italic |
| keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.import, keyword.control.export | #884080 | bold |
| keyword.operator.new, keyword.operator.expression, keyword.other, keyword.other.unit, keyword.other.substitution, keyword.other.important, keyword.other.annotation | #884080 | bold |
| storage, storage.type, storage.type.class, storage.type.function, storage.modifier, storage.modifier.package, storage.modifier.import, storage.type.annotation | #884080 | bold |
| string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other | #288848 | — |
| string.template, string.regexp, string.other.link, constant.character.escape | #288848 | — |
| punctuation.definition.string | #2b364c | — |
| support.type, support.class, entity.name.type, entity.name.type.class, entity.name.type.enum, entity.name.type.interface, entity.name.type.struct | #2870a0 | — |
| meta.return-type, meta.type-parameters | #2870a0 | — |
| entity.name.function, support.function, meta.function-call, meta.function-call.generic | #1890b0 | — |
| meta.function.method, support.function.builtin | #1890b0 | — |
| variable, variable.other, variable.other.readwrite | #1a2233 | — |
| variable.other.constant, variable.language, variable.language.this, variable.language.super | #1a2233 | — |
| variable.parameter, variable.parameter.function, variable.parameter.function-call | #48a0c8 | — |
| constant, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal | #b87850 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #a87830 | — |
| constant.character, constant.other.color, constant.other.key, constant.other.symbol | #a87830 | — |
| entity.name.constant | #a87830 | — |
| keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.relational | #48a0c8 | — |
| keyword.operator.assignment, keyword.operator.comparison, keyword.operator.bitwise | #48a0c8 | — |
| punctuation.separator, punctuation.terminator, punctuation.definition.block, punctuation.definition.arguments | #2b364c | — |
| punctuation.definition.parameters, punctuation.section, punctuation.section.brackets, punctuation.section.braces, punctuation.section.parens | #2b364c | — |
| meta.brace, meta.bracket | #2b364c | — |
| entity.name.tag, entity.name.tag.css, entity.name.tag.js, entity.name.tag.ts, entity.name.tag.jsx, entity.name.tag.tsx | #884080 | — |
| meta.tag, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end | #884080 | — |
| entity.other.attribute-name, meta.attribute, meta.selector | #2870a0 | — |
| support.type.property-name, meta.property-name, support.type.vendored.property-name | #2870a0 | — |
| support.constant.property-value, meta.property-value | #b87850 | — |
| entity.name.filename, meta.path | #404e65 | — |
| markup.heading, markup.heading.1, markup.heading.2, markup.heading.3, markup.heading.4, markup.heading.5, markup.heading.6 | #1890b0 | bold |
| punctuation.definition.heading | #48a0c8 | — |
| markup.bold, punctuation.definition.bold | #1a2233 | bold |
| markup.italic, punctuation.definition.italic | #1a2233 | italic |
| markup.underline, markup.underline.link | #1890b0 | underline |
| markup.strikethrough | #983848 | strikethrough |
| markup.raw, markup.inline.raw, markup.raw.block, punctuation.definition.raw | #a87830 | — |
| markup.list, markup.list.numbered, markup.list.unnumbered, punctuation.definition.list | #48a0c8 | — |
| markup.quote, punctuation.definition.blockquote | #404e65 | italic |
| markup.inserted | #288848 | — |
| markup.deleted | #983848 | — |
| markup.changed | #48a0c8 | — |
| meta.link, meta.image, string.other.link, constant.other.reference.link | #1890b0 | — |
| punctuation.definition.link | #48a0c8 | — |
| meta.diff, meta.diff.header, meta.diff.range | #404e65 | — |
| markup.inserted.diff | #288848 | — |
| markup.deleted.diff | #983848 | — |
| markup.changed.diff | #48a0c8 | — |
| punctuation.definition.separator.diff | #2b364c | — |
| invalid, invalid.illegal | #983848 | bold |
| invalid.deprecated | #a87830 | bold |
| entity.name.decorator, meta.decorator, storage.type.annotation | #988830 | — |
| log.error | #983848 | — |
| log.warning | #988830 | — |
| log.info | #1890b0 | — |
| log.debug | #404e65 | — |
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, comment.line, comment.block | #6a7288 | italic |
| comment.block.documentation | #6a7288 | italic |
| comment.block.documentation storage.type.class | #6a7288 | italic |
| keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.import, keyword.control.export | #d888b0 | bold |
| keyword.operator.new, keyword.operator.expression, keyword.other, keyword.other.unit, keyword.other.substitution, keyword.other.important, keyword.other.annotation | #d888b0 | bold |
| storage, storage.type, storage.type.class, storage.type.function, storage.modifier, storage.modifier.package, storage.modifier.import, storage.type.annotation | #d888b0 | bold |
| string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other | #70b880 | — |
| string.template, string.regexp, string.other.link, constant.character.escape | #70b880 | — |
| punctuation.definition.string | #9098a8 | — |
| support.type, support.class, entity.name.type, entity.name.type.class, entity.name.type.enum, entity.name.type.interface, entity.name.type.struct | #78a8d0 | — |
| meta.return-type, meta.type-parameters | #78a8d0 | — |
| entity.name.function, support.function, meta.function-call, meta.function-call.generic | #90d8f0 | — |
| meta.function.method, support.function.builtin | #90d8f0 | — |
| variable, variable.other, variable.other.readwrite | #b8c0d0 | — |
| variable.other.constant, variable.language, variable.language.this, variable.language.super | #b8c0d0 | — |
| variable.parameter, variable.parameter.function, variable.parameter.function-call | #a0d8f0 | — |
| constant, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal | #e0a880 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #d89868 | — |
| constant.character, constant.other.color, constant.other.key, constant.other.symbol | #d89868 | — |
| entity.name.constant | #d89868 | — |
| keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.relational | #a0d8f0 | — |
| keyword.operator.assignment, keyword.operator.comparison, keyword.operator.bitwise | #a0d8f0 | — |
| punctuation.separator, punctuation.terminator, punctuation.definition.block, punctuation.definition.arguments | #9098a8 | — |
| punctuation.definition.parameters, punctuation.section, punctuation.section.brackets, punctuation.section.braces, punctuation.section.parens | #9098a8 | — |
| meta.brace, meta.bracket | #9098a8 | — |
| entity.name.tag, entity.name.tag.css, entity.name.tag.js, entity.name.tag.ts, entity.name.tag.jsx, entity.name.tag.tsx | #d888b0 | — |
| meta.tag, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end | #d888b0 | — |
| entity.other.attribute-name, meta.attribute, meta.selector | #78a8d0 | — |
| support.type.property-name, meta.property-name, support.type.vendored.property-name | #78a8d0 | — |
| support.constant.property-value, meta.property-value | #e0a880 | — |
| entity.name.filename, meta.path | #6a7288 | — |
| markup.heading, markup.heading.1, markup.heading.2, markup.heading.3, markup.heading.4, markup.heading.5, markup.heading.6 | #90d8f0 | bold |
| punctuation.definition.heading | #a0d8f0 | — |
| markup.bold, punctuation.definition.bold | #b8c0d0 | bold |
| markup.italic, punctuation.definition.italic | #b8c0d0 | italic |
| markup.underline, markup.underline.link | #90d8f0 | underline |
| markup.strikethrough | #d07080 | strikethrough |
| markup.raw, markup.inline.raw, markup.raw.block, punctuation.definition.raw | #d89868 | — |
| markup.list, markup.list.numbered, markup.list.unnumbered, punctuation.definition.list | #a0d8f0 | — |
| markup.quote, punctuation.definition.blockquote | #6a7288 | italic |
| markup.inserted | #70b880 | — |
| markup.deleted | #d07080 | — |
| markup.changed | #a0d8f0 | — |
| meta.link, meta.image, string.other.link, constant.other.reference.link | #90d8f0 | — |
| punctuation.definition.link | #a0d8f0 | — |
| meta.diff, meta.diff.header, meta.diff.range | #6a7288 | — |
| markup.inserted.diff | #70b880 | — |
| markup.deleted.diff | #d07080 | — |
| markup.changed.diff | #a0d8f0 | — |
| punctuation.definition.separator.diff | #9098a8 | — |
| invalid, invalid.illegal | #d07080 | bold |
| invalid.deprecated | #d89868 | bold |
| entity.name.decorator, meta.decorator, storage.type.annotation | #d0b868 | — |
| log.error | #d07080 | — |
| log.warning | #d0b868 | — |
| log.info | #90d8f0 | — |
| log.debug | #6a7288 | — |
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}!`;
}