A dark theme with enhanced syntax highlighting for JavaScript. Scope highlighting, along with bold and italic fonts make it easy to identify your code and visualize its structure. It supports other languages as well. Its clean and stylish design is easy on the eyes. Inspired by Umut Topuzoğlu's Blul
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 |
|---|---|---|
| comment.unused.elixir | #ffffff | — |
| comment.line.double-slash.js, comment, punctuation.definition.comment, comment.block.documentation punctuation.definition, string.comment, comment.block.documentation, comment.block | #b5aca2 | italic |
| comment.block.documentation variable, keyword.other.documentation, storage.type.class.jsdoc, comment.block variable.parameter, keyword.other.phpdoc, comment.block.documentation, meta.other.type.phpdoc support class | #ce5858 | — |
| punctuation.comma.graphql, punctuation.definition.variable, punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts, punctuation.section.class.begin.js, punctuation.section.class.end.js, punctuation.definition.tag.begin.svelte, punctuation.definition.tag.end.svelte, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.function, punctuation.brace, punctuation.terminator.statement, punctuation.delimiter.object.comma, punctuation.definition.entity, punctuation.definition, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.separator.key-value, punctuation.separator.dictionary, punctuation.terminator, punctuation.delimiter.comma, punctuation.separator.comma, punctuation.accessor, punctuation.separator.array, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, meta.embedded.expression.js, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.separator.statement, punctuation.separator.parameter, constant.name.attribute.tag.pug, punctuation.section.embedded, punctuation.separator.method, punctuation.separator, punctuation.other.comma, keyword.control.ternary, string.interpolated.pug, support.function.interpolation.sass, punctuation.parenthesis.begin, punctuation.parenthesis.end, punctuation.operation.graphql, punctuation.colon.graphql, punctuation.definition.tag | #ffff00 | — |
| meta.brace.square, meta.brace.square.js | #2f8fbb | — |
| none | #71c2f8 | — |
| entity.name.function.accessor.js | #249dfa | — |
| entity.name.function.method.js | #9dfa24 | — |
| support.type.object.console.js | #48e4b5 | — |
| keyword.operator | #cb3777 | — |
| keyword, keyword.operator.expression, variable.language, keyword.other.special-method.elixir, meta.control.flow | #10b1fe | — |
| storage.type.js | #10b1fe | — |
| variable.other.readwrite.ts, variable.other.readwrite.js, variable.other.name, source.elixir.embedded.source, string source.groovy, string meta.embedded.line.ruby | #f769e1 | — |
| entity.name.function.js, meta.method-call.with-arguments.js | #01ddff | — |
| storage.type.function.js, meta.function.js, source.js | #39ff14 | — |
| meta.function.js, meta.method-call.with-arguments.js, source.js | #1b744f | — |
| support.class, entity.name.class, entity.name.type.class, meta.class.instance, meta.class.inheritance, entity.other.inherited-class, entity.name.prototype, variable.other.constant.elixir, storage.type.haskell, support.type.graphql, support.type.enum.graphql | #df8a3f | — |
| entity.name.function.js | #01ddff | — |
| support.type.object.dom.js, source.js | #eff22c | — |
| storage, constant.language | #1671e1 | — |
| string, punctuation.definition.string, support.constant.property-value, string.quoted.double.shell, support.function.variable.quoted.single.elixir, storage.type.string | #fcff32 | — |
| punctuation.definition.string.begin.html, meta.attribute.class.html, meta.tag.inline.i.start.html, text.html.derivative | #e84393 | — |
| punctuation.definition.string.end.html, meta.attribute.class.html, meta.tag.inline.i.start.html, text.html.derivative | #e84393 | — |
| meta.brace.curly.litobj.js | #9cf878 | — |
| punctuation.quasi.element.begin.js, entity.quasi.element.js, string.quoted.template.js | #ff33ff | — |
| punctuation.quasi.element.end.js, entity.quasi.element.js, string.quoted.template.js | #ff33ff | — |
| meta.brace.round.js, meta.brace.round.ts, meta.method-call.with-arguments.js, source.js | #f24141fa | — |
| punctuation.definition.quasi.begin.js, string.quoted.template.js, string.quasi.js, meta.function.js, meta.method-call.with-arguments.js, source.js | #47f0e5 | — |
| punctuation.definition.quasi.end.js, string.quoted.template.js, string.quasi.js, meta.function.js, meta.method-call.with-arguments.js, source.js | #47f0e5 | — |
| string.quoted.template.js | #05fc25 | — |
| constant.numeric, variable.other.anonymous.elixir | #ff78f8 | — |
| none | #ff78f8 | — |
| punctuation.definition.string.begin.js | #54fe62 | — |
| punctuation.definition.string.end.js | #54fe62 | — |
| Bool, constant.language.boolean.true.js, constant.language.boolean.false.js | #fcf960 | — |
| constant, const, let, variable.other.constant, constant.other.symbol, constant.language.symbol, support.constant, support.variable.magic.python | #7d57ef | — |
| entity.name.tag.html, entity.name.tag.svelte | #0a79ff | — |
| entity.other.attribute-name.html, entity.other.attribute-name.svelte, entity.other.attribute-name.js | #3bf065 | — |
| entity.other.attribute-name.jsx | #ff812d | — |
| meta.selector | #ff3c3c | — |
| type.Number | #ff78f8 | — |
| markup.heading, punctuation.definition.heading, entity.name.section, markup.heading.setext | #7b94f8 | — |
| markup.italic | #ff936a | — |
| markup.italic, punctuation.definition.italic, comment, string.comment, comment.block.documentation, comment.block, keyword.operator.new, markup.quote, markup.inserted, markup.deleted, markup.changed, storage, entity.other.attribute-name | — | italic |
| keyword.operator, keyword.other.unit, support.type.property-name, keyword.other.special-method, entity.name.tag, function | — | |
| markup.raw.inline | #8cffc8 | — |
| string.other.link | #3691ff | — |
| meta.link | #10b1fe | — |
| beginning.punctuation.definition.list | #c287ce | — |
| markup.quote | #b49bfd | — |
| meta.separator | #ffffff | — |
| markup.inserted | #3fc56b | — |
| markup.deleted | #ff6480 | — |
| markup.changed | #10b1fe | — |
| string.regexp | #00dbf4 | — |
| keyword.control.loop.js, meta.for.js, meta.forEach.js, meta.forIn.js, meta.while.js | #d98cff | — |
| entity.other.attribute-name.id.css, meta.selector.css, source.css | #f46781 | — |
| punctuation.definition.tag.end.html, meta.tag.structure.ul.start.html, text.html.derivative, punctuation.definition.tag.begin.svelte, punctuation.definition.tag.end.svelte | #fee440 | — |
| constant.character.escape, constant.other.character-class | #ff936a | — |
| string.interpolated, pugtext.pug | #3FC56B | — |
| invalid | #d7260b | — |
| keyword.operator.new | #10fede | — |
| entity.other.attribute-name.id | #bd5757 | — |
| meta.function-call.arguments, variable.other.readwrite.js, meta.method-call.with-arguments.js | #e621c8 | — |
| keyword.control.conditional.js | #7da2ff | — |
| punctuation.terminator.statement.js, meta.method-call.with-arguments.js | #57ff7e | — |
| meta.property-value.css, meta.property-list.css, source.css | #3d8bff | — |
| meta.object-literal.key, meta.object.member, variable.other.property, variable.other.object.property, support.variable.property, variable.object.property, support.type.property-name, meta.property-name, entity.name.tag.yaml, constant.other.object.key.js, string.unquoted.label.js, support.type.map.key, variable.graphql | #8a5ef0 | — |
| markup.inline.raw, markup.fenced_code.block, markup.raw.block | #e64d4d | — |
| punctuation.definition.tag.begin.html, meta.tag.structure.div.start.html, text.html.derivative | #fee440 | — |
| markup.underline.link.image | #3fc56b | — |
| variable.parameter, variable.function.javascript, parameter.variable.function.elixir, variable.other.block.ruby, meta.method-call.with-arguments.js | #b46ad1 | — |
| string.quoted.double.js, string.quoted.single.js | #ffff37 | — |
| variable.language.this.js, meta.function-call.with-arguments.js, meta.function.js, meta.method-call.with-arguments.js | #3967ff | — |
| string.quoted.double.html, meta.attribute.class.html, meta.tag.inline.i.start.html, text.html.derivative | #8338ec | — |
| support.type.object.dom.js | #eff22c | — |
| meta.method-call.with-arguments.js, meta.function.js, source.js | #258b9b | — |
| support.function.mutator.js | #2a72b6 | — |
| text.xml | #ffffff | — |
| string.quoted.double.html, meta.attribute.src.html, meta.tag.metadata.script.start.html, meta.embedded.block.html, text.html.derivative | #2be6f0 | — |
| meta.parameters.tsx, punctuation.definition.tag.end.html, meta.tag.metadata.meta.void.html, text.html.derivative | #fee440 | — |
| string.quoted.double.html, meta.attribute.href.html, meta.tag.inline.a.start.html, text.html.derivative | #0a79ff | — |
| entity.name.tag, entity.name.tag.other.html, meta.tag.other.html, entity.name.tag.svelte | #0a79ff | — |
| meta.embedded.expression.svelte | #12a4c9 | — |
| text.html, text.svelte | #ffffff | — |
| meta.embedded.expression.svelte | #f372e8 | — |
| meta.tage.start.svelte, meta.tag.end.svelte, meta.scope.tag.#each.svelte | #3347a0 | — |
| entity.name.type.svelte, meta.directive.on.svelte | #718af7 | — |
| keyword.operator.relational.js | #ffff00 | — |
| support.type.primitive.ts | #02a8d1 | — |
| string.interpolated.dollar.shell | #ff6480 | — |
| string.other.math.shell | #3691ff | — |
| punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell | #7a82da | — |
| text.html.derivative | #ffffff | — |
| comment.rainbow4 | #ea4646 | — |
| markup.bold.rainbow9 | #9f7efe | |
| JSXNested, JSXAttrs, meta.tag.jsx | #ffff00 | — |
| support.type.primitive.flowtype | #0011ff | — |
| text.pug | #8218d8 | — |
| invalid.rainbow10 | #ff936a | — |
| entity.name.function.python | #2bd5ff | — |
| support.function.magic.python | #2bff2b | — |
| support.function.builtin.python | #4ee7e0 | — |
| string.quoted.docstring.multi.python | #5a89c7 | — |
| string.quoted.single.python | #ffb13b | — |
| meta.function.python | #c074ff | — |
| string.quoted.double.python | #ffb13b | — |
| comment.line.number-sign.python | #ffffff | — |
| meta.function-call.generic.python | #65c43f | — |
| other.python, meta.variable.other.python, meta.function.other.python | #5d78ec | — |
| meta.directive.vue | #e875ff | — |
| meta.directive.vue | #e875ff | — |
| constant.character.format.placeholder.other.python | #d6ff43 | — |
| entity.name.function.decorator.python | #2bff2b | — |
| other.source.python, meta.variable.other.python, meta.function.other.python | #573fc4 | — |
| entity.other.attribute-name.class.css.sass | #ff8ef0 | — |
| support.type.builtin.graphql | #f51cd8 | — |
| entity.name.function.graphql | #ffebfc | — |
| JSXNested, JSXAttrs, meta.tag.jsx | #ffffff | — |
| meta.item-access.python | #45ad00 | — |
| variable.other.object.js | #ff557c | — |
| storage.type.function.arrow.js | #39ff27 | — |
| meta.brace.curly.js | #27dfff | — |
| entity.other.attribute-name.jsx | #bc50ff | — |
| punctuation.definition.string.begin.jsx, punctuation.definition.string.end.jsx | #0a79ff | — |
| support.class.component.close.jsx, support.class.component.open.jsx | #2bff18 | — |
| support.class.component.tsx | #f0ac00 | — |
| string.template.tsx | #73ff50 | — |
| entity.name.function.tsx, entity.name.function.ts | #e9576fec | — |
| variable.other.readwrite.al, variable.other.readwrite.alias.tsx, variable.other.readwrite.alias.ts | #56fda9 | — |
| entity.name.type.alias.tsx | #f0dc6e | — |
| meta.jsx.children.tsx | #ffffff | — |
| entity.name.type.module.tsx | #e965e9 | — |
| entity.name.type.tsx | #5883df | — |
| variable.other.readwrite.tsx | #6ddefa | — |
| entity.other.attribute-name.tsx | #63fba8e7 | — |
| support.type.primitive.tsx | #93e179e7 | — |
| entity.name.type.instance.js | #2a8de4e7 | — |
| string.unquoted.js | #fa94f1e7 | — |
| entity.name.type.interface.tsx, entity.name.type.interface.ts | #6af0ffe7 | — |
| variable.other.root | #ff00f2 | — |
| variable.other.assignment.prisma | #fa77f4 | — |
| entity.name.type.config.prisma | #0273b0 | — |
| entity.name.type.model.prisma | #28b002 | — |
| support.type.primitive.prisma | #ff9361 | — |
| support.function.functional.prisma | #f48b1be3 | — |
| entity.name.function.attribute.prisma | #6666f9e3 | — |
| source.prisma.embedded.source | #2e52e4e3 | — |
| variable.other.alias.graphql | #bfa0fce3 | bold |
| support, declaration.meta.type | #345dff | bold |
| meta.selections | #ffe344e5 | — |
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}!`;
}