A modern dark theme for VS Code inspired by the Palenight VS Code theme, designed for better readability, high contrast, and long coding sessions with a clean and consistent color palette across the editor.
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 | #8892B2 | — |
| comment, comment.line, comment.block, punctuation.definition.comment | #697098 | italic |
| comment.block.documentation, comment.line.documentation, punctuation.definition.comment.documentation | #697098 | italic |
| keyword, keyword.other, keyword.operator.new, keyword.operator.delete, storage.modifier, storage.type | #C792EA | — |
| keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.from, keyword.control.as, keyword.control.async, keyword.control.await, keyword.control.yield, keyword.control.trycatch, keyword.control.throw | #C792EA | — |
| keyword.preprocessor, keyword.control.directive, keyword.control.import.define, keyword.control.import.include, meta.preprocessor, meta.preprocessor.string, meta.preprocessor.numeric | #E77369 | — |
| meta.preprocessor.string source, meta.preprocessor source | #DCDCDC | — |
| keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.ternary | #B687DC | — |
| punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.section | #DCDCDC | — |
| string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.unquoted | #9BDD8D | — |
| string.quoted.other, string.regexp | #9BDD8D | — |
| constant.character.escape, string.escape, punctuation.definition.escape | #B776FB | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #EB7669 | — |
| constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan, constant.language | #EB7669 | — |
| constant, constant.other | #DADADA | — |
| entity.name.type, support.type | #ffcb6b | — |
| entity.name.class, entity.name.type.class, support.class | #FFCB6B | — |
| entity.name.type.struct, storage.type.struct | #E0BE8B | — |
| entity.name.type.interface, entity.other.inherited-class | #F28B82 | — |
| entity.name.type.enum | #FFCB68 | — |
| entity.name.module, entity.name.namespace, entity.name.type.module, entity.name.type.namespace | #ffcb6b | — |
| entity.name.type.delegate | #7FAAFB | — |
| entity.name.type.parameter, entity.name.type.type-parameter | #B8D7A3 | — |
| entity.name.namespace, entity.name.type.namespace, meta.namespace | #8892B2 | — |
| entity.name.function, entity.name.method, meta.definition.method entity.name.function, meta.function entity.name.function | #82AAFF | — |
| meta.function-call, meta.method-call, variable.function, support.function | #82AAFF | — |
| entity.name.function.constructor | #82AAFF | — |
| variable, variable.other, variable.other.readwrite | #89DDFF | — |
| variable.other.local, variable.other.block | #89DDFF | — |
| variable.parameter, meta.function.parameters variable | #89DDFF | — |
| variable.other.property, variable.other.member, variable.other.object.property, support.variable.property, meta.property-name | #8892B2 | — |
| variable.language.this, variable.language.self, variable.language.super | #C792EA | italic |
| meta.definition variable, meta.var.expr entity.name | #B3B9D4 | — |
| entity.name.tag, meta.tag entity.name.tag | #7FAAFB | — |
| punctuation.definition.tag, meta.tag punctuation.definition.tag | #89DDFF | — |
| entity.other.attribute-name, meta.tag entity.other.attribute-name | #E06C75 | — |
| entity.other.attribute-name.localname.xml, entity.other.attribute-name.xml | #ffcb6b | — |
| string.quoted.double.html, string.quoted.single.html, meta.attribute string | #9BDD8D | — |
| constant.character.entity, punctuation.definition.entity | #FF9D3A | — |
| keyword.operator.html, punctuation.separator.key-value.html | #BDC1D4 | — |
| support.class.component, entity.name.tag.tsx, entity.name.tag.jsx | #569CD6 | — |
| markup.bold, punctuation.definition.bold | #92CAF4 | bold |
| markup.heading, entity.name.section | #84CEFF | bold |
| markup.italic | #8892B2 | italic |
| markup.underline.link, string.other.link | #9BDD8D | — |
| markup.inline.raw, markup.raw.inline | #C3E88D | — |
| markup.fenced_code | #697098 | — |
| markup.quote, punctuation.definition.quote | #697098 | italic |
| keyword.other.unit | #EB7669 | — |
| keyword.control.at-rule | #c792ea | — |
| keyword.css | #80CBC1 | — |
| 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, meta.selector | #FFCB68 | — |
| support.type.property-name, support.type.vendored.property-name | #80CBC1 | — |
| support.other.variable.less, variable.other.readwrite.less, variable.less | #C563BD | — |
| entity.other.attribute-name.parent.less | #ffcb6b | — |
| punctuation.definition.entity.less | #ffcb6b | — |
| entity.other.attribute-name.pseudo-class.less | #ffcb6b | — |
| string.quoted.single.less, string.quoted.single.scss | #E77369 | — |
| entity.other.attribute-name.class.less | #7DBAD7 | — |
| punctuation.definition.variable.less | #C563BD | — |
| punctuation.definition.keyword.less, punctuation.definition.keyword.scss | #C792EA | — |
| punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.terminator.rule.css, punctuation.terminator.rule.less, punctuation.definition.block.begin.less, punctuation.definition.block.end.less, punctuation.terminator.rule.scss, punctuation.definition.block.begin.scss, punctuation.definition.block.end.scss | #8892B2 | — |
| variable.css, variable.other.css, variable.other.custom-property.css | #80CBC1 | — |
| entity.name.tag.wildcard.css | #FFCB68 | — |
| punctuation.definition.entity.css | #FFCB68 | — |
| support.constant.property-value, meta.property-value, support.constant.color | #E77369 | — |
| string.quoted.double.css, string.quoted.single.css, string.url.css, string.quoted.single.less, string.quoted.single.scss | #9BDD8D | — |
| variable.scss, variable.less, variable.other.less, variable.other.scss | #C563BD | — |
| entity.other.attribute-name.placeholder.css, entity.name.function.scss, entity.name.function.less | #7DBAD7 | — |
| support.function.color.scss, support.function.math.scss | #E77369 | — |
| support.function.misc.scss | #82AAFF | — |
| source.css.scss support.constant.font-name.css | #E77369 | — |
| entity.name.tag.reference.scss | #FFCB6B | — |
| entity.other.attribute-name.attribute.scss | #FFCB6B | — |
| punctuation.definition.interpolation.begin.bracket.curly.scss | #E77369 | — |
| support.function.transform.css | #E77369 | — |
| entity.other.attribute-name.css, entity.other.attribute-name.less | #FFCB68 | — |
| entity.name.tag.less | #FFCB68 | — |
| source.css, source.css.embedded.html | #80CBC1 | — |
| support.type.property-name.json, string.json meta.structure.dictionary.json > string.quoted.json | #D7BA7D | — |
| constant.language.json | #c792ea | — |
| punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json | #c792ea | — |
| keyword.xml, meta.tag.preprocessor.xml, keyword.other.doctype | #569CD6 | — |
| string.quoted.double.xml, string.quoted.single.xml | #9BDD8D | — |
| string.unquoted.cdata.xml | #8892B2 | — |
| string.regexp source | #C3E88D | — |
| keyword.operator.anchor.regexp, keyword.control.anchor.regexp | #FF5370 | — |
| keyword.operator.quantifier.regexp | #FF9E64 | — |
| constant.other.character-class.regexp, keyword.operator.negation.regexp, punctuation.definition.character-class.regexp | #82AAFF | — |
| punctuation.definition.group.regexp, meta.group.regexp | #C792EA | — |
| keyword.operator.or.regexp | #00D1B2 | — |
| constant.character.escape.regexp | #F78C6C | — |
| entity.name.function.decorator.python | #FFCB6B | — |
| support.function.builtin.python | #82AAFF | — |
| variable.language.special.python | #C792EA | italic |
| support.type.python | #e0be8b | — |
| support.type.exception.python | #f28b82 | — |
| meta.indexed-name.python | #82AAFF | — |
| constant.other.caps.python | #8892B2 | — |
| entity.name.type.cpp | #FFCB6B | — |
| keyword.control.directive.include.cpp, keyword.control.directive.define.cpp | #8892B2 | — |
| entity.name.scope-resolution.cpp | #89DDFF | — |
| entity.name.type.parameter.cpp | #e0be8b | — |
| support.type.vb.asp | #FFCB6B | — |
| entity.name.type.fsharp | #FFCB6B | — |
| support.type.primitive.ts, support.type.builtin.ts | #e0be8b | — |
| punctuation.accessor.optional.ts | #C792EA | — |
| punctuation.definition.variable.php | #89DDFF | — |
| constant.other.php | #82AAFF | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #8892b2ac | — |
| constant.other.class.php | #8892B2 | — |
| entity.name.type.trait.php | #FFCB6B | — |
| variable.other.php | #8892B2 | — |
| constant.enum.php | #8892B2 | — |
| keyword.operator.class.php | #89DDFF | — |
| constant.other.enum.java | #8892B2 | — |
| storage.modifier.import.java | #8892B2 | — |
| storage.type.generic.java | #e0be8b | — |
| entity.name.type.go | #FFCB6B | — |
| constant.other.placeholder.go | #8892B2 | — |
| entity.name.type.package.go | #F28B82 | — |
| entity.name.type.rust | #FFCB68 | — |
| entity.name.type.enum.rust | #F28B82 | — |
| punctuation.definition.interpolation.rust | #8892B2 | — |
| entity.name.type.trait.rust | #F28B82 | — |
| entity.name.type.primitive.rust | #8892B2 | — |
| entity.name.type.numeric.rust | #EB7669 | — |
| entity.name.type.result.rust | #82AAFF | — |
| entity.name.type.option.rust | #82AAFF | — |
| entity.name.type.lifetime.rust | #89DDFF | — |
| constant.other.caps.rust | #8892B2 | — |
| entity.name.type.swift | #F28B82 | — |
| support.type.swift | #89DDFF | — |
| entity.name.type.protocol.swift | #FFCB68 | — |
| entity.name.type.struct.swift | #FFCB68 | — |
| storage.type.struct.swift | #C792EA | — |
| entity.name.type.svelte | #e0be8b | — |
| support.type.primitive.tsx | #89DDFF | — |
| support.type.builtin.tsx | #C792EA | — |
| entity.name.type.module.tsx | #e0be8b | — |
| entity.name.tag.tsx | #7FAAFB | — |
| support.class.component.js.jsx, support.class.component.tsx | #FFCB6B | — |
| punctuation.section.array.begin.ruby, punctuation.section.array.end.ruby | #89DDFF | — |
| constant.language.symbol.hashkey.ruby, constant.other.symbol.hashkey.parameter.function.ruby | #8892B2 | — |
| constant.other.key.perl | #89DDFF | — |
| punctuation.definition.string.begin.perl, punctuation.definition.string.end.perl | #89DDFF | — |
| entity.name.function.sql | #B3725B | — |
| support.function.sql, entity.name.table.sql | #D7BA7D | — |
| support.function.aggregate.sql | #58C5E8 | — |
| keyword.operator.sql | #B48EAD | — |
| string.quoted.single.sql | #98C379 | — |
| constant.other.table-name.sql | #89DDFF | — |
| constant.other.database-name.sql | #89DDFF | — |
| entity.name.function.sql | #FFCB68 | — |
| markup.bold markdown | #EEFFFF | bold |
| markup.italic markdown | #8892B2 | italic |
| markup.raw.block.fenced.markdown | #C3E88D | — |
| beginning.punctuation.definition.list.markdown | #82AAFF | — |
| meta.separator.markdown | #4E5579 | — |
| markup.inserted, meta.diff.range.unified.to | #9BDD8D | — |
| markup.deleted, meta.diff.range.unified.from | #FF5370 | — |
| markup.changed | #82AAFF | — |
| meta.diff, meta.diff.header | #676E95 | — |
| string.other.link, *url*, *link*, *uri* | #9BDD8D | — |
| invalid, invalid.illegal | #D85050 |
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}!`;
}