Jack into your code with CyberpunkCygnus, VS Code color themes (dark, light, and high-contrast light) inspired by the twilight hues of a high-tech metropolis. The deep charcoal background provides the perfect contrast for syntax that's pleasant to the eye: electric purples, data-stream teals, and gl
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 |
|---|---|---|
| emphasis | — | italic |
| strong | — | bold |
| comment | #616E88 | italic |
| punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment | #616E88 | — |
| invalid.illegal | #BF616A | — |
| invalid.deprecated | #EBCB8B | strikethrough |
| token.error-token | #BF616A | — |
| token.debug-token | #B48EAD | — |
| token.info-token | #88C0D0 | — |
| token.warn-token | #EBCB8B | — |
| constant.language, constant.language.boolean, support.constant, variable.language.this, variable.language.special | #B48EAD | — |
| variable.language.this, variable.language.special | — | italic |
| constant.numeric | #D08770 | — |
| constant.character, constant.other, support.constant.property-value, variable.other.constant | #B48EAD | — |
| constant.character.escape | #EBCB8B | — |
| constant.regexp, string.regexp | #EBCB8B | — |
| keyword, storage, storage.type, storage.modifier | #81A1C1 | — |
| keyword.operator | #ECEFF4 | — |
| keyword.other.new | #81A1C1 | bold |
| keyword.control | #81A1C1 | bold |
| variable, variable.other, variable.parameter, meta.definition.variable.name, support.variable | #EBCB8B | — |
| entity.name.function, meta.function.definition entity.name.function, meta.function-call entity.name.function, meta.method-call entity.name.function, support.function, entity.name.function.constructor | #88C0D0 | — |
| entity.name.function.member | #88C0D0 | italic |
| meta.function-call variable.other | #EBCB8B | — |
| entity.name.class, entity.name.type, entity.name.type.class, entity.name.type.struct, entity.name.type.enum, entity.name.type.interface, entity.name.namespace, support.class, support.type, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy | #8FBCBB | — |
| entity.other.inherited-class | #8FBCBB | bold |
| string | #A3BE8C | — |
| string.interpolated variable, string.template meta.template.expression variable, string.template meta.embedded variable | #EBCB8B | — |
| string.interpolated punctuation.definition, string.template punctuation.definition.template-expression, string.template punctuation.definition.embedded | #81A1C1 | — |
| punctuation | #ECEFF4 | — |
| punctuation.definition.tag, punctuation.separator.inheritance, punctuation.terminator, punctuation.definition.variable | #81A1C1 | — |
| punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.list, punctuation.definition.array | #ECEFF4 | — |
| punctuation.accessor, punctuation.separator.pointer-access | #ECEFF4 | — |
| entity.name.tag | #81A1C1 | — |
| entity.other.attribute-name | #8FBCBB | italic |
| punctuation.separator.pointer-access.c | #C586C0 | — |
| source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include, source.cpp meta.preprocessor.include, source.cpp string.quoted.other.lt-gt.include | #8FBCBB | — |
| source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive | #5E81AC | bold |
| source.cpp storage.type, source.c storage.type | #81A1C1 | bold |
| source.cpp entity.name.type, source.c entity.name.type | #8FBCBB | — |
| source.cpp entity.name.namespace, source.c entity.name.namespace | #72C3FC | — |
| source.cpp entity.name.function, source.c entity.name.function | #FFF3BF | — |
| support.type.property-name.json | #EBCB8B | — |
| source.json meta.structure.dictionary.value string.quoted.double | #A3BE8C | — |
| source.json meta.structure.dictionary.value constant.numeric | #D08770 | — |
| source.json meta.structure.dictionary.value constant.language | #B48EAD | — |
| source.json meta.structure.dictionary.json string.quoted.double.json | #8FBCBB | bold |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json | #D8DEE9 | — |
| punctuation.definition.string.begin.json | #81A1C1 | — |
| punctuation.separator.key-value.json | #7D7C9B | — |
| source.json punctuation.separator.dictionary.key-value | #C586C0 | — |
| source.json punctuation.definition.array.begin.json, source.json punctuation.definition.array.end.json, source.json punctuation.definition.dictionary.begin.json, source.json punctuation.definition.dictionary.end.json | #ECEFF4 | — |
| source.json constant.numeric.json | #B48EAD | — |
| source.json constant.language.json | #81A1C1 | — |
| entity.name.function.cmake, keyword.control.cmake | #88C0D0 | — |
| variable.parameter.cmake, variable.other.cmake | #EBCB8B | — |
| constant.language.cmake | #B48EAD | — |
| source.cmake entity.name.function.cmake, source.cmake meta.function-call.cmake variable.function.cmake | #FFF3BF | — |
| source.cmake variable.other.cmake, source.cmake variable.other.readwrite.cmake | #72C3FC | — |
| source.cmake string.quoted.double.cmake | #A3BE8C | — |
| source.cmake keyword.control.cmake | #C586C0 | bold |
| source.cmake comment.line.cmake | #616E88 | italic |
| source.cmake constant.other.cmake | #B48EAD | — |
| source.python entity.name.function.decorator, source.python meta.function.decorator support.type | #D08770 | — |
| source.python meta.function-call, source.python meta.function-call.generic | #88C0D0 | — |
| source.python support.type | #88C0D0 | — |
| source.python variable.parameter.function.language | #D8DEE9 | — |
| source.python meta.function.parameters variable.parameter.function.language.special.self | #B48EAD | italic |
| source.python meta.function.parameters variable.parameter.typehint | #8FBCBB | — |
| source.python meta.function.return-type | #8FBCBB | — |
| source.python keyword.control, source.python keyword.operator.logical | #C586C0 | — |
| source.python storage.type.class, source.python storage.type.function | #81A1C1 | bold |
| storage.modifier.specifier.cpp | #81A1C1 | — |
| variable.other.member | #EBCB8B | — |
| source.cpp variable.parameter | #B48EAD | — |
| source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function, source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function | #D08770 | — |
| source.js meta.object-literal.key, source.ts meta.object-literal.key, source.tsx meta.object-literal.key | #EBCB8B | — |
| source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class, support.type.primitive | #8FBCBB | — |
| storage.type.class.jsdoc, keyword.other.documentation | #81A1C1 | — |
| variable.other.jsdoc, entity.name.type.instance.jsdoc | #8FBCBB | — |
| markup.heading | #88C0D0 | bold |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.inserted | #A3BE8C | — |
| markup.deleted, punctuation.definition.deleted | #BF616A | — |
| markup.changed | #EBCB8B | — |
| text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title, markup.underline.link | #88C0D0 | — |
| markup.underline.link, constant.other.reference.link | #A3BE8C | underline |
| text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code.block | #A3BE8C | — |
| text.html.markdown markup.fenced_code.block punctuation.definition, fenced_code.block.language, text.html.markdown beginning.punctuation.definition.list, text.html.markdown beginning.punctuation.definition.quote, text.html.markdown punctuation.definition.heading, text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string | #81A1C1 | — |
| text.html.markdown markup.quote | #8FBCBB | italic |
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...
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}!`;
}