A dark editor theme with handpicked colours and heavily inspired by the ultraviolet colour (colour of the year 2018) and Outrun aesthetics. A theme with contrast and accessibility for colourblindess in mind.
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 |
|---|---|---|
| markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file | #FFE46BD0 | italic |
| markup.deleted.diff | #FF6E9C98 | italic |
| markup.inserted.diff | #18C1C4A6 | italic |
| string.regexp, string.regexp keyword.other | #7998F2 | — |
| string | #7998F2 | — |
| string.quoted | #66E9EC | — |
| constant.other.color | #FFE46B | — |
| support.constant.math | #F5A394 | — |
| constant.language, punctuation.definition.constant, variable.other.constant | #C4A2F5 | — |
| constant.character, constant.other | #B07AFC | — |
| constant.character.escape | #F5A394 | — |
| support.constant.meta.property-value | #7998F2 | — |
| constant.language.null | #FF6E9C | — |
| constant.language.boolean | #FF6E9C | — |
| constant.numeric, constant.character.numeric | #F5A394 | |
| variable | #F5A394 | italic |
| variable.interpolation | #7998F2 | — |
| variable.parameter.function | #C6D8FA | |
| variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property | #D6DEEB | — |
| variable.other.object.property | #FFE46B | italic |
| variable.other.object.js | #7EF3CA | |
| keyword.operator | #FFE46B | |
| keyword.operator.logical | #C4A2F5 | |
| keyword.other.unit | #FFE46B | — |
| punctuation.accessor, keyword | #F26196 | italic |
| keyword.operator.relational | #B07AFC | italic |
| keyword.operator.assignment | #B07AFC | — |
| keyword.operator.arithmetic | #B07AFC | — |
| keyword.operator.bitwise | #B07AFC | — |
| keyword.operator.increment | #B07AFC | — |
| keyword.operator.ternary | #B07AFC | — |
| storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, storage.type.function.arrow | #F26196 | italic |
| storage.type | #B07AFC | — |
| storage.type.function.arrow.js | — | |
| entity.name.class, meta.class entity.name.type.class | #7998F2 | — |
| object.comma | #D6DEEB | — |
| object | #7998F2 | — |
| entity.other.inherited-class | #FFE46B | italic |
| entity.name.function | #7998F2 | italic |
| meta.function-call | #C6D8FA | — |
| entity.name.function | #7998F2 | italic |
| entity.name.tag.custom | #66E9EC | — |
| support.function, support.constant | #82AAFF | — |
| support.type, support.class | #FFE46B | — |
| support.variable.dom | #B07AFC | — |
| support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag | #7998F2 | |
| invalid.deprecated, invalid | #FF6E9C | — |
| meta.selector | #C4A2F5 | italic |
| entity.other.attribute-name.id | #B07AFC | — |
| meta.property-name | #7EF3CA | — |
| entity.name.tag.doctype, meta.tag.sgml.doctype | #C4A2F5 | italic |
| keyword.control.operator | #B07AFC | — |
| invalid.broken | #FF6E9C | — |
| invalid.unimplemented | #FF6E9C | — |
| invalid.illegal | #FF6E9C | — |
| meta.property-list entity.name.tag.reference | #66E9EC | — |
| entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css | #B07AFC | — |
| source.css support, entity.name.tag.css, entity.name.tag, source.stylus support | #7EF3CA | — |
| source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant | #FF96B7 | — |
| constant.other.color.rgb-value punctuation.definition.constant | #F5A394 | — |
| variable.other.object.cs | #C6D8FA | — |
| storage.modifier.cs | #FFE46B | — |
| keyword.other.special-method.dockerfile | #B07AFC | — |
| source.env | #FEFEFF | — |
| variable.other.env | #B07AFC | — |
| keyword.other.template.begin.env, keyword.other.template.end.env, keyword.operator.assignment.env | #D6DEEB | — |
| meta.selectionset.graphql, variable.graphql | #C4A2F5 | — |
| source.graphql | #F26196 | — |
| punctuation.operation.graphql | #D6DEEB | — |
| meta.embedded.block.ini, source.ini | #EFEFEF | — |
| entity.name.section.group-title.ini | #7998F2 | — |
| source.ini keyword, keyword.other.definition.ini | #B07AFC | — |
| source.ini punctuation.definition | #66E9EC | — |
| source.ini punctuation.separator, punctuation.separator.key-value.ini | #FF96B7 | — |
| variable.other.readwrite.js, variable.parameter, variable.other.readwrite.alias.js | #EFEFEF | — |
| support.class.component.js, support.class.component.tsx, entity.other.attribute-name.js | #F3CA7E | |
| keyword.control.export.js, keyword.operator.new.js, keyword.other.debugger, keyword.control | #B07AFC | — |
| keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts | #FF6E9C | |
| meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx | #C6D8FA | — |
| punctuation.definition.tag, meta.tag, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #FF96B7 | — |
| entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html | #C4A2F5 | |
| entity.other.attribute-name | #FFE46B | italic |
| punctuation.definition.comment.html, comment.block.html | #8786ac | italic |
| string.quoted.double.json | #D6DEEB | — |
| variable.language.variables.tle.arm-template, variable.language.variables.variable-name.tle.arm-template | #B07AFC | — |
| variable.other.makefile | #66E9EC | — |
| punctuation.definition.variable.makefile | #66E9EC | — |
| punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown | #FF6E9C | — |
| entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, markup.heading.markdown | #82B1FF | — |
| markup.inserted.diff, punctuation.definition.inserted.diff | #18C1C4 | — |
| markup.deleted.diff, punctuation.definition.deleted.diff | #FF6E9C | — |
| meta.embedded.block.diff | #EFEFEF | — |
| meta.paragraph.markdown | #EFEFEF | — |
| punctuation.definition.from-file.diff, meta.diff.header.from-file | #8786ac | — |
| markup.inline.raw.string.markdown | #A599E9 | — |
| punctuation.definition.quote.begin.markdown, markup.quote.markdown | #7EF3CA | — |
| markup.quote.markdown meta.paragraph.markdown | #EFEFEF | italic |
| meta.separator.markdown | #82B1FF | — |
| markup.bold.markdown | #F3CA7E | bold |
| markup.italic.markdown | #B07AFC | italic |
| beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown | #7EF3CA | — |
| string.other.link.description.title.markdown punctuation.definition.string.markdown, meta.link.inline.markdown string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, meta.image.inline.markdown string.other.link.description.title.markdown | #66E9EC | |
| meta.link.inline.markdown string.other.link.title.markdown, meta.link.reference.markdown string.other.link.title.markdown, meta.link.reference.def.markdown markup.underline.link.markdown, string.other.link.description.markdown | #EFEFEF | — |
| markup.underline.link.markdown, string.other.link.description.title.markdown | #A599E9 | — |
| fenced_code.block.language, markup.inline.raw.markdown | #A599E9FF | — |
| punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown | #82B1FF | — |
| punctuation.definition.string.markdown, meta.link.inline.markdown punctuation.definition.string | #82B1FF | — |
| meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown, meta.link.reference.markdown punctuation.definition.string.begin.markdown, meta.link.reference.markdown punctuation.definition.string.end.markdown | #FF6E9C | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown | #C4A2F5 | — |
| punctuation.definition.metadata.markdown, string.other.link.description.title.markdown punctuation.definition.string.markdown | #C6D8FA | — |
| constant.keyword.clojure, meta.map.clojure, meta.definition.global.clojure, meta.expression.clojure | #C4A2F5 | — |
| meta.vector.clojure, source.clojure | #FEFEFF | — |
| comment.line.double-slash | #8786ac | — |
| meta.brace | #D6DEEB | — |
| meta.delimiter.period | #C4A2F5 | italic |
| punctuation.definition.string | #D6DEEB | — |
| punctuation.definition.parameters | #C2F4E2 | — |
| punctuation.definition.template-expression | #C2F4E2 | — |
| punctuation.definition.tag, meta.tag | #C4A2F5 | — |
| meta.function punctuation.separator.comma | #B4ADCA | — |
| comment, punctuation.definition.comment | #8786ac | italic |
| punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, punctuation.section.embedded, meta.array | #D6DEEB | — |
| punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list | #7EF3CA | — |
| variable.parameter.function.language.special.self.python | #18C1C4 | — |
| meta.function-call.python, meta.function-call.generic.python | #C6D8FA | — |
| support.function.builtin.python | #FFE46B | — |
| variable.parameter.function.python, meta.function-call.arguments.python | #82AAFF | — |
| source.python, variable.parameter.function-call.python | #EFEFEF | — |
| meta.member.access.python | — | italic |
| punctuation.python, punctuation.separator.element.python, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python | #C4A2F5 | — |
| entity.name.function.decorator.python | #FFE46B | — |
| source.python variable.language.special | #C4A2F5 | — |
| keyword.control.import.python | #F26196 | — |
| meta.member.access.python | #C4A2F5 | — |
| variable.parameter.r, variable.other.r, entity.name.function.r | #EFEFEF | — |
| meta.function-call.r, meta.function.parameters.r, meta.function-call.arguments.r, meta.function.r | #C4A2F5 | — |
| variable.parameter.function.r, variable.function.r | #82AAFF | — |
| keyword.operator.assignment.r | #C4A2F5 | — |
| constant.language.r | #FF96B7 | — |
| meta.function-call.r | #F3CA7E | — |
| punctuation.definition.heading.restructuredtext, markup.heading.restructuredtxt | #82B1FF | — |
| support.directive.restructuredtext | #7EF3CA | — |
| markup.underline.substitution.restructuredtext, markup.underline.link, punctuation.definition.substitution.restructuredtext | #66E9EC | — |
| entity.name | #A599E9 | — |
| markup.list.restructuredtext, beginning.punctuation.definition.list.restructuredtext, punctuation.definition.list.begin.restructuredtext, markup.list.unnumbered.restructuredtext, markup.list.numbered.restructuredtext | #82B1FF | — |
| markup.bold.restructuredtext | #F3CA7E | bold |
| markup.inline.raw.string.restructuredtext, punctuation.definition.raw.restructuredtext, markup.raw.restructuredtext | #A599E9 | — |
| markup.italic.restructuredtext | #B07AFC | italic |
| variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass | #B07AFC | — |
| source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable | #82AAFF | — |
| source.css.scss | #C6D8FA | — |
| meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute | #F5A394 | — |
| entity.name.tag.scss, entity.name.tag.sass | #7EF3CA | — |
| keyword.other.unit.scss, keyword.other.unit.sass | #FFE46B | — |
| source.sass support.constant.property-value.css.sass | #FF96B7 | — |
| source.sass sass-script-maps variable.other | #B07AFC | — |
| source.sql string.quoted.single.sql | #7998F2 | — |
| keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx | #B07AFC | italic |
| variable.other.constant.ruby | #FF96B7 | — |
| variable.other.terraform, source.terraform, variable.other.readwrite.terraform | #EFEFEF | — |
| variable.other.assignment.terraform | #FF96B7 | — |
| keyword.key.toml | #B07AFC | — |
| entity.other.attribute-name.table.toml | #7998F2 | — |
| source.ts keyword | #C4A2F5 | — |
| source.ts punctuation.definition.parameters | #D6DEEB | — |
| meta.arrow.ts punctuation.definition.parameters, keyword.symbol.arrow.fsharp | #C4A2F5 | — |
| source.ts storage | #FF96B7 | — |
| variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts | #EFEFEF | — |
| meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx, meta.decorator.ts | #FF96B7 | — |
| entity.name.type.ts, entity.name.type.tsx | #FFE46B | — |
| support.class.node.ts, support.class.node.tsx | #7998F2 | — |
| meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type | #B4ADCA | — |
| meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block | #D6DEEB | — |
| meta.tag.js meta.jsx.children.tsx | #FF96B7 | — |
| entity.name.tag.yaml | #B07AFC | — |
| sring.unquoted.plain.out.yaml, text.yaml.jinja | #D6DEEB | — |
| meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted | — |
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}!`;
}