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 | #5c677d | italic |
| constant.character | #e09f3e | — |
| constant.character.escape | #e09f3e | — |
| constant.numeric, constant.language.boolean, constant.language | #a15ead | — |
| constant.language.boolean.true | #a15ead | — |
| constant.language.boolean.false | #a15ead | — |
| constant.language.undefined | #6c757d | — |
| constant.language.null | #6c757d | — |
| constant.regexp | #e09f3e | — |
| entity.name.class, entity.name.type.class | #00778c | — |
| entity.name.function | #2a9d8f | — |
| entity.name.tag | #a15ead | — |
| entity.other.attribute-name | #0088a1 | italic |
| entity.other.inherited-class | #00778c | bold |
| invalid.deprecated | #e09f3e | strikethrough |
| invalid.illegal | #d9534f | — |
| keyword | #0d6efd | bold |
| keyword.operator | #0d6efd | — |
| keyword.other.new | #0d6efd | — |
| markup.bold | — | bold |
| markup.changed | #e09f3e | bold |
| markup.link | #0088a1 | underline |
| markup.deleted | #d9534f | bold |
| punctuation.definition.deleted | #d9534f | — |
| markup.inserted | #2a9d8f | bold |
| meta.preprocessor | #0b5ed7 | bold |
| punctuation | #3e4551 | — |
| punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters | #3e4551 | — |
| punctuation.definition.tag | #a15ead | — |
| punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment | #5c677d | — |
| punctuation.definition.inserted | #2a9d8f | — |
| punctuation.definition.deleted | #d9534f | — |
| punctuation.section | #3e4551 | — |
| punctuation.section.embedded.begin, punctuation.section.embedded.end | #a15ead | — |
| punctuation.terminator | #a15ead | — |
| punctuation.definition.variable | #a15ead | — |
| storage | #0d6efd | bold |
| string | #ca6702 | — |
| string.regexp | #e09f3e | — |
| support.class | #00778c | — |
| support.constant | #0088a1 | — |
| support.function | #2a9d8f | — |
| support.function.construct | #0d6efd | — |
| support.type | #00778c | — |
| support.type.exception | #00778c | — |
| token.debug-token | #a15ead | — |
| token.error-token | #d9534f | — |
| token.info-token | #0088a1 | — |
| token.warn-token | #e09f3e | — |
| variable.other | #1e2127 | — |
| variable.language | #0d6efd | — |
| variable.parameter | #1e2127 | — |
| punctuation.separator.pointer-access.c | #a15ead | — |
| source.c meta.preprocessor.include, source.cpp meta.preprocessor.include | #0b5ed7 | bold |
| source.c string.quoted.other.lt-gt.include, source.cpp string.quoted.other.lt-gt.include | #00778c | — |
| source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive | #0b5ed7 | bold |
| source.css constant.other.color.rgb-value | #a15ead | — |
| source.css meta.property-value | #00778c | — |
| source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword | #d9534f | — |
| source.css punctuation.definition.keyword | #0d6efd | — |
| source.css support.type.property-name | #3e4551 | — |
| source.diff meta.diff.range.context | #00778c | — |
| meta.diff.range | #a15ead | — |
| source.diff meta.diff.header.from-file | #00778c | — |
| meta.diff.header.from-file | #d9534f | — |
| meta.diff.header.to-file | #2a9d8f | — |
| meta.diff.header.git | #0d6efd | — |
| meta.diff.index | #e09f3e | — |
| meta.diff.header | #0d6efd | bold |
| source.diff punctuation.definition.from-file | #00778c | — |
| source.diff punctuation.definition.range | #00778c | — |
| source.diff punctuation.definition.separator | #0d6efd | — |
| source.go constant.other.placeholder.go | #e09f3e | — |
| source.java comment.block.documentation.javadoc punctuation.definition.entity.html | #0d6efd | — |
| source.java constant.other | #3e4551 | — |
| source.java keyword.other.documentation | #00778c | — |
| source.java keyword.other.documentation.author.javadoc | #00778c | — |
| source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom | #00778c | — |
| source.java keyword.other.documentation.see.javadoc | #00778c | — |
| source.java meta.method-call meta.method | #2a9d8f | — |
| source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc | #00778c | — |
| source.java meta.tag.template.value.javadoc | #2a9d8f | — |
| source.java punctuation.definition.keyword.javadoc | #00778c | — |
| source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc | #8a94a8 | — |
| source.java storage.modifier.import | #00778c | — |
| source.java storage.modifier.package | #00778c | — |
| source.java storage.type | #00778c | — |
| source.java storage.type.annotation | #d9534f | — |
| source.java storage.type.generic | #00778c | — |
| source.java storage.type.primitive | #0d6efd | — |
| source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function | #d9534f | — |
| source.js meta.object-literal.key | #2a9d8f | — |
| source.js storage.type.class.jsdoc | #00778c | — |
| source.js string.template punctuation.definition.template-expression | #0b5ed7 | — |
| source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object | #3e4551 | — |
| source.js support.type.primitive | #0d6efd | — |
| variable.language.this.js | #0d6efd | italic |
| meta.tag.js entity.name.tag.js support.class.component.js | #0d6efd | — |
| source.js meta.var.expr variable.other.object | #00778c | — |
| source.js variable.other.readwrite.alias | #00778c | — |
| text.html.basic constant.character.entity.html | #e09f3e | — |
| text.html.basic constant.other.inline-data | #d9534f | italic |
| text.html.basic meta.tag.sgml.doctype | #5c677d | — |
| text.html.basic punctuation.definition.entity | #0d6efd | — |
| source.properties entity.name.section.group-title.ini | #2a9d8f | — |
| source.properties punctuation.separator.key-value.ini | #0d6efd | — |
| text.html.markdown markup.fenced_code.block | #5c677d | — |
| text.html.markdown markup.fenced_code.block punctuation.definition | #3e4551 | — |
| fenced_code.block.language | #3e4551 | — |
| markup.heading | #0088a1 | bold |
| text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw | #00778c | — |
| markup.inline.raw | #ca6702 | — |
| markup.italic | #2a9d8f | italic |
| markup.list | #a15ead | — |
| text.html.markdown markup.underline.link | #0088a1 | underline |
| text.html.markdown beginning.punctuation.definition.list | #0d6efd | — |
| text.html.markdown beginning.punctuation.definition.quote | #00778c | — |
| text.html.markdown markup.quote | #8a94a8 | italic |
| markup.quote | #e09f3e | italic |
| markup.raw | #ca6702 | — |
| text.html.markdown punctuation.definition.heading | #0d6efd | — |
| text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string | #0d6efd | — |
| text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title | #2a9d8f | — |
| source.php meta.function-call, source.php meta.function-call.object | #2a9d8f | — |
| source.python entity.name.function.decorator, source.python meta.function.decorator support.type | #d9534f | — |
| source.python meta.function-call, source.python meta.function-call.generic | #2a9d8f | — |
| source.python support.type | #00778c | — |
| source.python variable.parameter.function.language | #3e4551 | — |
| source.python meta.function.parameters variable.parameter.function.language.special.self | #0d6efd | italic |
| source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly | #0d6efd | — |
| source.css.scss variable.interpolation | #3e4551 | italic |
| 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 | #d9534f | — |
| source.ts meta.object-literal.key, source.tsx meta.object-literal.key | #2a9d8f | — |
| source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function | #2a9d8f | — |
| 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 | #00778c | — |
| source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json | #00778c | — |
| source.ts support.variable, source.tsx support.variable | #3e4551 | — |
| text.xml entity.name.tag.namespace | #00778c | — |
| text.xml keyword.other.doctype | #5c677d | — |
| text.xml meta.tag.preprocessor entity.name.tag | #5c677d | — |
| text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string | #d9534f | italic |
| source.yaml entity.name.tag | #00778c | — |
| variable, variable.other, variable.parameter | #1e2127 | — |
| keyword, storage | #0d6efd | bold |
| entity.name.function, support.function | #2a9d8f | — |
| entity.name.type, entity.name.class, support.class, support.type | #00778c | — |
| punctuation | #3e4551 | — |
| meta.preprocessor | #0b5ed7 | bold |
| source.c keyword.control.directive, source.cpp keyword.control.directive, source.c punctuation.definition.directive, source.cpp punctuation.definition.directive | #0b5ed7 | bold |
| source.json meta.structure.dictionary.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.separator.dictionary.key-value.json | #2a9d8f | — |
| source.python entity.name.function.decorator, source.python support.function.builtin, source.python meta.function-call.generic | #d9534f | — |
| source.python variable.parameter.function.language.special.self | #0d6efd | italic |
| source.c entity.name.function, source.cpp entity.name.function, source.c meta.function-call, source.cpp meta.function-call | #2a9d8f | — |
| source.c storage.type, source.cpp storage.type, source.c entity.name.type, source.cpp entity.name.type | #00778c | — |
| source.c variable.other.member, source.cpp variable.other.member | #1e2127 | — |
| source.cmake keyword.control | #2a9d8f | bold |
| source.cmake variable | #00778c | — |
| source.cmake entity.name.function | #0d6efd | — |
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}!`;
}