Heptapod Theme
Publisher: Kenzie BottomsThemes in package: 1
An Arrival-inspired theme for VS Code
An Arrival-inspired theme for VS Code
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, punctuation.definition.comment | #66777f | — |
| comment.block | #95a0a6 | — |
| string, string.quoted, punctuation.definition.string | #ebbcbc | — |
| string.regexp | #ebbcbc | normal |
| keyword.control.anchor.regexp | #74abab | normal |
| constant.character.escape.backslash.regexp | #6ebee6 | — |
| punctuation.definition.group.regexp | #bfe6f7 | — |
| punctuation.definition.template-expression | #bfe6f7 | — |
| string.regexp keyword.other | #e3ae7b | — |
| string.template meta.template.expression, string.template.js | #e3ae7b | — |
| constant.language.boolean | — | bold |
| constant.language.boolean.true | #74ababbb | — |
| constant.language.boolean.false | #cd8062bb | — |
| support.constant.math | #bfe6f7 | — |
| constant.language, punctuation.definition.constant, variable.other.constant, source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir | #74abab | — |
| constant.character, constant.other | #bfe6f7 | — |
| support.constant, keyword.other.special-method, keyword.other.new | #74abab | — |
| support.constant.json | #bfe6f7 | — |
| keyword.operator.arithmetic.js, keyword.operator.increment.js, meta.var.expr keyword.operator.assignment | #6ebee6 | — |
| meta.array.literal.js variable.other.readwrite.js | #ebbcbc | — |
| constant.character.escape | #74abab | — |
| constant.numeric, constant.character.numeric, constant.numeric.hex | #bfe6f7 | — |
| variable | #bfe6f7 | — |
| punctuation.accessor, keyword | #b1b9bd | — |
| keyword.other.unit | #6ebee6 | — |
| keyword.operator | #6ebee6 | — |
| storage | #6ebee6 | — |
| constant.language.undefined | #b1b9bd | italic |
| constant.language.null | #95a0a6 | bold italic |
| storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js | #e3ae7b | — |
| entity.name.class, meta.class entity.name.type.class | #bfe6f7 | — |
| entity.other.inherited-class | #ebbcbc | — |
| entity.name.function | #bfe6f7 | — |
| variable.parameter | #f7f7f7 | — |
| punctuation.definition.tag, meta.tag | #f7f7f7 | — |
| entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc | #f7f7f7 | italic |
| variable.other.jsdoc, variable.other.phpdoc | #ebbcbc | — |
| storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc | #74abab | italic |
| entity.name.type.instance.jsdoc | #f7f7f7 | — |
| entity.name.type.instance.jsdoc punctuation.definition.bracket | #95a0a6 | italic |
| comment.block.documentation.js variable.other.jsdoc | — | bold |
| support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.js, meta.tag.tsx, meta.tag.html | #6ebee6 | — |
| meta.tag.structure.body entity.name.tag, meta.tag.structure.head entity.name.tag, meta.tag.structure.html entity.name.tag, meta.tag.metadata.style entity.name.tag, meta.tag.structure.html punctuation.definition.tag, meta.tag.structure.head punctuation.definition.tag, meta.tag.structure.body punctuation.definition.tag, meta.tag.metadata.style punctuation.definition.tag | — | bold |
| entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, punctuation.definition.tag | #ebbcbc | — |
| meta.tag.metadata.script entity.name.tag, meta.tag.metadata.script punctuation.definition.tag | #74abab | — |
| punctuation.definition.tag.html | #74abab | — |
| entity.other.attribute-name | #bfe6f7 | — |
| meta.attribute string.quoted | #e3ae7b | — |
| entity.other.attribute-name.id.html, meta.attribute.id.html entity.other.attribute-name, meta.attribute.name.html entity.other.attribute-name, meta.attribute.href.html entity.other.attribute-name, meta.attribute.src.html entity.other.attribute-name | #6ebee6 | — |
| entity.name.tag.custom | #bfe6f7 | — |
| constant.character.entity.named | #e3ae7b | — |
| meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, meta.tag.metadata.doctype.html entity.name.tag.html, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.metadata.doctype.html punctuation.definition.tag | #6ebee699 | italic |
| support.constant | #ebbcbc | — |
| support.constant.meta.property-value | #74abab | — |
| support.type, support.class | #bfe6f7 | — |
| support.variable.dom | #bfe6f7 | — |
| storage.modifier | #e3ae7b | — |
| keyword.operator.relational | #6ebee6 | — |
| keyword.operator.assignment | #6ebee6 | — |
| meta.brace | #f7f7f7 | — |
| meta.delimiter.period | #6ebee6 | — |
| object.comma | #f7f7f7 | — |
| variable.parameter.function | #74abab | — |
| support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag | #ebbcbc | — |
| meta.property-list entity.name.tag.reference | #e3ae7b | — |
| constant.other.color.rgb-value punctuation.definition.constant, constant.other.color.rgb-value.hex.css | #74abab | — |
| constant.other.color | #6ebee6 | — |
| meta.selector | #6ebee6 | — |
| entity.other.attribute-name.id | #ebbcbc | — |
| meta.property-name | #ebbcbc | — |
| punctuation.definition.parameters | #f7f7f7 | — |
| keyword.control.operator | #74abab | — |
| keyword.control.flow | #74abab | — |
| keyword.operator.logical | #6ebee6 | — |
| keyword.control | #74abab | — |
| variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance, variable.other.readwrite.instance punctuation.definition.variable | #e3ae7b | — |
| variable.language | #e3ae7b | — |
| variable.other.property | #6ebee6 | — |
| variable.other.object.property | #f7f7f7 | — |
| entity.name.function | #bfe6f7 | — |
| keyword.operator.comparison | #6ebee6 | — |
| support.function | #f7f7f7 | — |
| invalid, invalid.deprecated | #cd8062 | — |
| invalid.broken | #cd8062 | — |
| invalid.unimplemented | #cd8062 | — |
| invalid.illegal | #cd8062 | — |
| support.variable.property | #74abab | — |
| support.variable.property.dom.js | #74abab | — |
| variable.function | #74abab | — |
| variable.interpolation | #e3ae7b | — |
| meta.function-call | #bfe6f7 | — |
| punctuation.section.embedded | #e3ae7b | — |
| italic | #6ebee6 | italic |
| bold | #bfe6f7 | bold |
| quote | #ebbcbc | — |
| raw | #ebbcbc | — |
| variable.assignment.coffee | #74abab | — |
| variable.parameter.function.coffee | #f7f7f7 | — |
| variable.assignment.coffee | #74abab | — |
| variable.other.readwrite.cs | #f7f7f7 | — |
| keyword.other.using | #74abab | — |
| entity.name.type.class.cs, storage.type.cs | #bfe6f7 | — |
| entity.name.type.namespace.cs | #6ebee6 | — |
| entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css | #e3ae7b | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss | #bfe6f7 | — |
| entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss | #bfe6f7 | — |
| keyword.control.at-rule, keyword.control.at-rule punctuation.definition | #74abab | bold |
| entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, keyword.operator.combinator.css | #74abab | bold |
| source.css keyword.other.unit, source.css constant.numeric | #6ebee6 | — |
| meta.attribute-selector.css entity.other.attribute-name.attribute | #74abab | — |
| support.type.property-name.css | #f7f7f7 | — |
| meta.property-value.scss, meta.property-value.scss support.type.property-name.css | #bfe6f7 | — |
| source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable | #bfe6f7 | — |
| meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute | #74abab | — |
| entity.name.tag.scss, entity.name.tag.sass | #e3ae7b | — |
| keyword.other.unit.scss, keyword.other.unit.sass | #6ebee6 | — |
| support.function.misc.scss, support.function.misc.sass | #ebbcbc | — |
| variable.parameter.url.scss, variable.parameter.url.sass | #95a0a6 | italic underline |
| meta.directive.vue entity.other.attribute-name, meta.directive.vue punctuation.separator.key-value.html | #6ebee6 | — |
| source.directive.vue string.unquoted.label.js | #e3ae7b | — |
| source.directive.vue variable.other.object.js | #bfe6f7 | — |
| expression.embedded.vue punctuation.definition | #e3ae7b | — |
| expression.embedded.vue variable.other.readwrite.js | #f7f7f7 | — |
| expression.embedded.vue meta.property.object.js | #6ebee6 | — |
| source.directive.vue variable.other.readwrite.js, source.directive.vue punctuation.definition.string | #ebbcbc | — |
| meta.directive.vue string.quoted.single.js | #74abab | — |
| source.vue meta.tag string.quoted | #f7f7f7 | — |
| source.vue source.directive.vue string.quoted | #ebbcbc | — |
| source.vue entity.name.tag.template.html | — | bold |
| source.vue entity.name.tag.script.html | — | bold |
| source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir | #bfe6f7 | — |
| source.elixir entity.name.function | #bfe6f7 | — |
| source.elixir punctuation.definition.string | #ebbcbc | — |
| source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir | #bfe6f7 | — |
| source.elixir .punctuation.binary.elixir | #6ebee6 | — |
| source.go meta.function-call.go | #bfe6f7 | — |
| meta.class entity.name.type.class.js | #bfe6f7 | — |
| meta.arrow.js punctuation.definition.parameters.begin.js, meta.arrow.js punctuation.definition.parameters.end.js | #95a0a6 | — |
| meta.method.declaration storage.type.js | #bfe6f7 | |
| terminator.js | #f7f7f7 | — |
| meta.export.default.js, meta.export.default.js keyword.control, keyword.control.export.js | #95a0a6 | — |
| meta.export.default.js variable.other.readwrite.js | #ebbcbc | bold |
| meta.js punctuation.definition.js | #f7f7f7 | — |
| variable.other.meta.import.js, meta.import.js variable.other, keyword.operator.module.js | #ebbcbc | — |
| source.js keyword.control | #74abab | — |
| support.type.object.module.js | #bfe6f799 | — |
| keyword.control.conditional.js | #6ebee6 | — |
| source.js variable.parameter | #ebbcbc | — |
| variable.other.readwrite.js | #f7f7f7 | — |
| string.quoted.double.js meta.object-literal.key | #6ebee6 | — |
| variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx | #f7f7f7 | — |
| meta.jsx entity.name.tag.js, meta.jsx punctuation.definition.tag | #f7f7f7 | — |
| variable.js, variable.other.js | #f7f7f7 | — |
| entity.name.type.js, entity.name.type.module.js | #bfe6f7 | — |
| support.class.js | #f7f7f7 | — |
| meta.object-literal.key.js string.quoted, meta.object-literal.key.js | #6ebee6 | — |
| string.unquoted.label.js | #6ebee6 | — |
| support.type.property-name.json | #e3ae7b | — |
| string.quoted.double.json meta.structure.dictionary.value.json, string.quoted.double.json punctuation.definition.string.json | #ebbcbc | — |
| meta.structure.dictionary.json meta.structure.dictionary.value constant.language | #74abab | — |
| variable.other.ruby | #f7f7f7 | — |
| source.ruby keyword.control | #6ebee6 | — |
| constant.language.symbol.hashkey.ruby | #74abab | — |
| meta.embedded.line.ruby variable.other.readwrite.instance, meta.embedded.line.ruby variable.other.readwrite.instance punctuation.definition.variable.ruby, meta.embedded.line.ruby punctuation.definition.variable | #74abab | — |
| source.ruby support.class, entity.name.type.class.ruby | #e3ae7b | — |
| entity.name.type.class.ruby | — | bold |
| variable.parameter.function.swift entity.name.function.swift | #f7f7f7 | — |
| meta.parameter-clause.swift support.type.swift | #ebbcbc | — |
| meta.definition.type.class.swift storage.type.class.swift | #74abab | — |
| meta.definition.type.class.swift entity.name.type.class.swift | #ebbcbc | bold |
| meta.definition.type.class.swift meta.inheritance-clause.swift | #95a0a6 | italic |
| source.swift keyword.control | #74abab | — |
| meta.definition.function.initializer.swift storage.type.function.swift | #74abab | — |
| meta.embedded.line.swift | #f7f7f7 | — |
| entity.name.tag.less | #e3ae7b | — |
| meta.attribute-selector.less entity.other.attribute-name.attribute | #74abab | — |
| markup.heading.markdown, markup.heading.markdown entity.name.section.markdown | #e3ae7b | — |
| punctuation.definition.heading.markdown | #e3ae7b88 | — |
| markup.italic.markdown | #f7f7f7 | italic |
| markup.bold.markdown | #f7f7f7 | bold |
| markup.quote.markdown, markup.quote.markdown meta.paragraph.markdown | #e3ae7b | italic |
| punctuation.definition.quote.begin.markdown, punctuation.definition.quote.end.markdown | #e3ae7b88 | — |
| markup.inline.raw.markdown, markup.inline.raw.string.markdown | #ebbcbc | — |
| punctuation.definition.raw.markdown | #ebbcbc88 | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown | #ebbcbc | — |
| string.other.link.title.markdown, string.other.link.description.markdown, meta.link.inline.markdown string.other.link.title.markdown | #6ebee6 | |
| text.html.markdown punctuation.definition, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.list.end.markdown, fenced_code.block.language.markdown | #829096 | — |
| support.class.php | #bfe6f7 | — |
| meta.function-call.php punctuation | #f7f7f7 | — |
| variable.other.global.php | #bfe6f7 | — |
| variable.other.global.php punctuation.definition.variable | #bfe6f7 | — |
| constant.language.python | #74abab | — |
| keyword.operator.logical.python | #6ebee6 | italic |
| keyword.control.flow.python | #6ebee6 | — |
| support.function.builtin.python | #74abab | — |
| storage.type.number.python | #829096 | — |
| variable.parameter.function.python, meta.function-call.arguments.python | #ebbcbc | — |
| punctuation.python | #f7f7f7 | — |
| entity.name.function.decorator.python | #b1b9bd | italic |
| 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 | #f7f7f7 | — |
| entity.name.type.ts, entity.name.type.tsx | #bfe6f7 | — |
| support.class.node.ts, support.class.node.tsx | #bfe6f7 | — |
| meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type | #f7f7f7 | — |
| meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block | #f7f7f7 | — |
| meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx | #bfe6f7 | — |
| meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx | #bfe6f7 | — |
| entity.name.tag.yaml | #74abab | — |
| comment.block.javadoc keyword.other.documentation | #6ebee690 | — |
| comment.block.javadoc entity.name.type.class | #bfe6f790 | — |
| comment.block.javadoc variable.parameter | #ebbcbc90 | — |
| punctuation.separator | #b1b9bd | — |
| string.quoted.double.java | #bfe6f7 | — |
| storage.type.generic.java | #74abab | — |
| variable.other.object.java | #f7f7f7 | — |
| meta.method-call.java entity.name.function.java | #ebbcbc | — |
| meta.class.java storage.modifier.java | #6ebee6 | — |
| meta.class.body meta.method storage.modifier.java | #6ebee6 | — |
| storage.modifier.import.java, meta.import.java storage.modifier.java | #829096 | — |
| storage.modifier.import.java variable.language.wildcard | #e3ae7b99 | — |
| keyword.other.import.java | #6ebee699 | — |
| keyword.other.package.java | #ebbcbc | bold italic |
| entity.name.type.class.java | #bfe6f7 | bold |
| storage.modifier.package.java | #f7f7f7 | — |
| meta.import.java punctuation | #f7f7f799 | — |
| meta.definition.variable.java storage.type.java | #74abab | — |
| storage.modifier.extends.java | #95a0a6 | — |
| meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.other.unit, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.control.ternary, keyword.operator.or.regexp, punctuation.definintion.string, punctuation | — | |
| meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.other.attribute-name, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, keyword.operator.type.annotation, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, parameter, italic, quote, keyword, storage, language, type .function, type.function, storage.type.class, type.var, meta.parameter, meta.parameters, keyword.control, modifier, this, comment | — | italic |
| token.info-token | #e3ae7b | — |
| token.warn-token | #cd8062 | — |
| token.error-token | #cd8062 | — |
| token.debug-token | #ebbcbc | — |
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}!`;
}