Eclipse Wave
A cosmic dark theme with soft, eye-friendly colors — designed for long coding sessions. Beautiful syntax highlighting for JS, TS, Python, React, Rust, Go, HTML, CSS, Markdown & more.
A cosmic dark theme with soft, eye-friendly colors — designed for long coding sessions. Beautiful syntax highlighting for JS, TS, Python, React, Rust, Go, HTML, CSS, Markdown & more.
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 |
|---|---|---|
| #C0CAF5 | — | |
| comment, punctuation.definition.comment, string.quoted.docstring | #6C7A9C | italic |
| keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.import, keyword.other.export, storage.type, storage.modifier, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as | #B8A0FF | — |
| entity.name.function, meta.function-call, support.function, entity.name.method, meta.method-call.js, support.function.misc, keyword.other.special-method, entity.name.function.python | #7FC3FF | — |
| string, string.quoted, string.template, string.interpolated, string.regexp, markup.inline.raw | #A8D8A0 | — |
| constant.numeric, constant.language.numeric | #FFAD70 | — |
| variable, variable.other, variable.object.property, variable.other.object.property, variable.other.constant, variable.parameter.function | #FFAD70 | — |
| entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, support.class, support.type, meta.type.annotation, entity.other.inherited-class | #E8C97A | — |
| entity.name.type.interface, support.type.builtin, support.constant.property-descriptor, support.variable.property, support.variable.dom, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #89DCEB | — |
| keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.bitwise, keyword.operator.type.annotation, meta.decorator, punctuation.decorator, constant.language.enum | #CBA6F7 | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.name.tag.html, entity.name.tag.xml | #F28FAD | — |
| entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml | #F28FAD | — |
| support.type.property-name, support.type.property-name.css, entity.name.tag.css | #89DCEB | — |
| support.constant.property-value.css, constant.other.color, constant.other.unit | #A8D8A0 | — |
| entity.name.module, variable.other.module, support.other.module, keyword.control.module, meta.import, meta.export, entity.name.tag.jsx, entity.name.tag.tsx | #FAB387 | — |
| support.type.property-name.json, string.json meta.structure.dictionary.json > string.quoted.json | #7FC3FF | — |
| markup.heading, entity.name.section.markdown | #B8A0FF | bold |
| markup.bold, markup.bold.markdown | #E8C97A | bold |
| markup.italic, markup.italic.markdown | #FFAD70 | italic |
| markup.underline.link, string.other.link.description | #7FC3FF | — |
| markup.fenced_code, markup.inline.raw.string.markdown | #A8D8A0 | — |
| punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace.round, meta.brace.curly, meta.brace.square | #8B92B8 | — |
| constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.infinity, constant.language.nan | #B8A0FF | — |
| punctuation.definition.template-expression | #CBA6F7 | — |
| constant.character.escape | #FAB387 | — |
| string.regexp, string.regexp.character-class | #F28FAD | — |
| keyword.other.DML, keyword.other.DDL, keyword.other.SQL | #B8A0FF | — |
| keyword.operator.pipe, keyword.operator.redirect | #CBA6F7 | — |
| keyword.other.definition.ini, variable.other.key.toml | #7FC3FF | — |
| keyword.other.special-method.dockerfile | #B8A0FF | — |
| keyword.operation.graphql, entity.name.fragment.graphql | #B8A0FF | — |
| entity.name.tag.yaml | #7FC3FF | — |
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 |
|---|---|---|
| #1F2328 | — | |
| comment, punctuation.definition.comment, string.quoted.docstring | #57606A | italic |
| keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.import, keyword.other.export, storage.type, storage.modifier, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as | #7847CC | — |
| entity.name.function, meta.function-call, support.function, entity.name.method, meta.method-call.js, support.function.misc, keyword.other.special-method, entity.name.function.python | #1C5FAA | — |
| string, string.quoted, string.template, string.interpolated, string.regexp, markup.inline.raw | #287A46 | — |
| constant.numeric, constant.language.numeric | #953800 | — |
| variable, variable.other, variable.object.property, variable.other.object.property, variable.other.constant, variable.parameter.function | #953800 | — |
| entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, support.class, support.type, meta.type.annotation, entity.other.inherited-class | #7847CC | — |
| entity.name.type.interface, support.type.builtin, support.constant.property-descriptor, support.variable.property, support.variable.dom, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #006080 | — |
| keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.bitwise, keyword.operator.type.annotation, meta.decorator, punctuation.decorator, constant.language.enum | #8250DF | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.name.tag.html, entity.name.tag.xml | #CF222E | — |
| entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml | #A0336B | — |
| support.type.property-name, support.type.property-name.css, entity.name.tag.css | #006080 | — |
| support.constant.property-value.css, constant.other.color, constant.other.unit | #287A46 | — |
| entity.name.module, variable.other.module, support.other.module, keyword.control.module, meta.import, meta.export, entity.name.tag.jsx, entity.name.tag.tsx | #8250DF | — |
| support.type.property-name.json, string.json meta.structure.dictionary.json > string.quoted.json | #1C5FAA | — |
| markup.heading, entity.name.section.markdown | #7847CC | bold |
| markup.bold, markup.bold.markdown | #7847CC | bold |
| markup.italic, markup.italic.markdown | #953800 | italic |
| markup.underline.link, string.other.link.description | #1C5FAA | — |
| markup.fenced_code, markup.inline.raw.string.markdown | #287A46 | — |
| punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace.round, meta.brace.curly, meta.brace.square | #6B7280 | — |
| constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.infinity, constant.language.nan | #7847CC | — |
| punctuation.definition.template-expression | #8250DF | — |
| constant.character.escape | #8250DF | — |
| string.regexp, string.regexp.character-class | #A0336B | — |
| keyword.other.DML, keyword.other.DDL, keyword.other.SQL | #7847CC | — |
| keyword.operator.pipe, keyword.operator.redirect | #8250DF | — |
| keyword.other.definition.ini, variable.other.key.toml | #1C5FAA | — |
| keyword.other.special-method.dockerfile | #7847CC | — |
| keyword.operation.graphql, entity.name.fragment.graphql | #7847CC | — |
| entity.name.tag.yaml | #1C5FAA | — |
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 |
|---|---|---|
| #CDD6F4 | — | |
| comment, punctuation.definition.comment, string.quoted.docstring | #5C6888 | italic |
| keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.import, keyword.other.export, storage.type, storage.modifier, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as | #A78BFA | — |
| entity.name.function, meta.function-call, support.function, entity.name.method, meta.method-call.js, support.function.misc, keyword.other.special-method, entity.name.function.python | #60A5FA | — |
| string, string.quoted, string.template, string.interpolated, string.regexp, markup.inline.raw | #34D399 | — |
| constant.numeric, constant.language.numeric | #FB923C | — |
| variable, variable.other, variable.object.property, variable.other.object.property, variable.other.constant, variable.parameter.function | #FB923C | — |
| entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, support.class, support.type, meta.type.annotation, entity.other.inherited-class | #F9E2AF | — |
| entity.name.type.interface, support.type.builtin, support.constant.property-descriptor, support.variable.property, support.variable.dom, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #94E2D5 | — |
| keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.bitwise, keyword.operator.type.annotation, meta.decorator, punctuation.decorator, constant.language.enum | #CBA6F7 | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.name.tag.html, entity.name.tag.xml | #F38BA8 | — |
| entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml | #F472B6 | — |
| support.type.property-name, support.type.property-name.css, entity.name.tag.css | #94E2D5 | — |
| support.constant.property-value.css, constant.other.color, constant.other.unit | #34D399 | — |
| entity.name.module, variable.other.module, support.other.module, keyword.control.module, meta.import, meta.export, entity.name.tag.jsx, entity.name.tag.tsx | #FBBF24 | — |
| support.type.property-name.json, string.json meta.structure.dictionary.json > string.quoted.json | #60A5FA | — |
| markup.heading, entity.name.section.markdown | #A78BFA | bold |
| markup.bold, markup.bold.markdown | #F9E2AF | bold |
| markup.italic, markup.italic.markdown | #FB923C | italic |
| markup.underline.link, string.other.link.description | #60A5FA | — |
| markup.fenced_code, markup.inline.raw.string.markdown | #34D399 | — |
| punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace.round, meta.brace.curly, meta.brace.square | #7888A8 | — |
| constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.infinity, constant.language.nan | #A78BFA | — |
| punctuation.definition.template-expression | #CBA6F7 | — |
| constant.character.escape | #FBBF24 | — |
| string.regexp, string.regexp.character-class | #F472B6 | — |
| keyword.other.DML, keyword.other.DDL, keyword.other.SQL | #A78BFA | — |
| keyword.operator.pipe, keyword.operator.redirect | #CBA6F7 | — |
| keyword.other.definition.ini, variable.other.key.toml | #60A5FA | — |
| keyword.other.special-method.dockerfile | #A78BFA | — |
| keyword.operation.graphql, entity.name.fragment.graphql | #A78BFA | — |
| entity.name.tag.yaml | #60A5FA | — |
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 |
|---|---|---|
| #E6EDF3 | — | |
| comment, punctuation.definition.comment, string.quoted.docstring | #8B949E | italic |
| keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.import, keyword.other.export, storage.type, storage.modifier, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as | #FF7B72 | — |
| entity.name.function, meta.function-call, support.function, entity.name.method, meta.method-call.js, support.function.misc, keyword.other.special-method, entity.name.function.python | #D2A8FF | — |
| string, string.quoted, string.template, string.interpolated, string.regexp, markup.inline.raw | #A5D6FF | — |
| constant.numeric, constant.language.numeric | #FFA657 | — |
| variable, variable.other, variable.object.property, variable.other.object.property, variable.other.constant, variable.parameter.function | #FFA657 | — |
| entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, support.class, support.type, meta.type.annotation, entity.other.inherited-class | #7EE787 | — |
| entity.name.type.interface, support.type.builtin, support.constant.property-descriptor, support.variable.property, support.variable.dom, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #79C0FF | — |
| keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.bitwise, keyword.operator.type.annotation, meta.decorator, punctuation.decorator, constant.language.enum | #D2A8FF | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.name.tag.html, entity.name.tag.xml | #7EE787 | — |
| entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml | #FF7B72 | — |
| support.type.property-name, support.type.property-name.css, entity.name.tag.css | #79C0FF | — |
| support.constant.property-value.css, constant.other.color, constant.other.unit | #A5D6FF | — |
| entity.name.module, variable.other.module, support.other.module, keyword.control.module, meta.import, meta.export, entity.name.tag.jsx, entity.name.tag.tsx | #FFA657 | — |
| support.type.property-name.json, string.json meta.structure.dictionary.json > string.quoted.json | #D2A8FF | — |
| markup.heading, entity.name.section.markdown | #FF7B72 | bold |
| markup.bold, markup.bold.markdown | #7EE787 | bold |
| markup.italic, markup.italic.markdown | #FFA657 | italic |
| markup.underline.link, string.other.link.description | #D2A8FF | — |
| markup.fenced_code, markup.inline.raw.string.markdown | #A5D6FF | — |
| punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace.round, meta.brace.curly, meta.brace.square | #8B949E | — |
| constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.infinity, constant.language.nan | #FF7B72 | — |
| punctuation.definition.template-expression | #D2A8FF | — |
| constant.character.escape | #FFA657 | — |
| string.regexp, string.regexp.character-class | #FF7B72 | — |
| keyword.other.DML, keyword.other.DDL, keyword.other.SQL | #FF7B72 | — |
| keyword.operator.pipe, keyword.operator.redirect | #D2A8FF | — |
| keyword.other.definition.ini, variable.other.key.toml | #D2A8FF | — |
| keyword.other.special-method.dockerfile | #FF7B72 | — |
| keyword.operation.graphql, entity.name.fragment.graphql | #FF7B72 | — |
| entity.name.tag.yaml | #D2A8FF | — |
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}!`;
}
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}!`;
}