Thetis Theme
Publisher: Kenzie BottomsThemes in package: 1
A marine color theme for VS Code
A marine color 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 |
|---|---|---|
| — | #f3f7ff | — |
| comment | #504d72 | — |
| comment.block | #7f7e9a | — |
| string, string.quoted | #f293ff | — |
| string.regexp, string.regexp keyword.other, punctuation.definition.template-expression | #3dd8ff | — |
| string.template meta.template.expression, string.template.js | #7284ff | — |
| constant.language.boolean | #7284ff | — |
| support.constant.math | #3dd8ff | — |
| constant.language, punctuation.definition.constant, variable.other.constant, source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir | #adaec2 | — |
| constant.character, constant.other | #3dd8ff | — |
| support.constant, keyword.other.special-method, keyword.other.new | #7284ff | — |
| support.constant.json | #3dd8ff | — |
| constant.character.escape | #f293ff | — |
| constant.numeric, constant.character.numeric | #3dd8ff | — |
| variable | #3dd8ff | — |
| punctuation.accessor, keyword | #adaec2 | — |
| keyword.other.unit | #5bffa5 | — |
| keyword.operator | #5bffa5 | — |
| storage | #5bffa5 | — |
| constant.language.null | #7f7e9a | — |
| storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js | #7284ff | — |
| entity.name.class, meta.class entity.name.type.class | #3dd8ff | — |
| entity.other.inherited-class | #f293ff | — |
| entity.name.function | #3dd8ff | — |
| variable.parameter | #f293ff | — |
| punctuation.definition.tag, meta.tag | #f3f7ff | — |
| entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc | #f3f7ff | — |
| variable.other.jsdoc, variable.other.phpdoc | #f293ff | — |
| support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.js, meta.tag.tsx, meta.tag.html | #5bffa5 | — |
| 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 | #f293ff | — |
| meta.tag.metadata.script entity.name.tag, meta.tag.metadata.script punctuation.definition.tag | #7284ff | — |
| punctuation.definition.tag.html | #7284ff | — |
| entity.other.attribute-name | #3dd8ff | — |
| meta.attribute string.quoted | #7284ff | — |
| 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 | #5bffa5 | — |
| entity.name.tag.custom | #3dd8ff | — |
| constant.character.entity.named | #7284ff | — |
| 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 | #5bffa599 | italic |
| support.constant | #f293ff | — |
| support.constant.meta.property-value | #7284ff | — |
| support.type, support.class | #3dd8ff | — |
| support.variable.dom | #3dd8ff | — |
| keyword.operator.relational | #5bffa5 | — |
| keyword.operator.assignment | #5bffa5 | — |
| meta.brace | #f3f7ff | — |
| meta.delimiter.period | #5bffa5 | — |
| object.comma | #f3f7ff | — |
| variable.parameter.function | #7284ff | — |
| support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag | #f293ff | — |
| meta.property-list entity.name.tag.reference | #7284ff | — |
| constant.other.color.rgb-value punctuation.definition.constant, constant.other.color.rgb-value.hex.css | #7284ff | — |
| constant.other.color | #5bffa5 | — |
| meta.selector | #5bffa5 | — |
| entity.other.attribute-name.id | #f293ff | — |
| meta.property-name | #f293ff | — |
| punctuation.definition.parameters | #f3f7ff | — |
| keyword.control.operator | #7284ff | — |
| keyword.operator.logical | #5bffa5 | — |
| variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance | #7284ff | — |
| variable.language | #7284ff | — |
| variable.other.property | #5bffa5 | — |
| variable.other.object.property | #f3f7ff | — |
| entity.name.function | #3dd8ff | — |
| keyword.operator.comparison | #5bffa5 | — |
| support.function | #f3f7ff | — |
| invalid, invalid.deprecated | #ff8dc6 | — |
| invalid.broken | #ff8dc6 | — |
| invalid.unimplemented | #ff8dc6 | — |
| invalid.illegal | #ff8dc6 | — |
| support.variable.property | #7284ff | — |
| support.variable.property.dom.js | #f293ff | — |
| variable.function | #f3f7ff | — |
| variable.interpolation | #7284ff | — |
| meta.function-call | #3dd8ff | — |
| punctuation.section.embedded | #7284ff | — |
| italic | #5bffa5 | italic |
| bold | #3dd8ff | bold |
| quote | #f293ff | — |
| raw | #f293ff | — |
| variable.assignment.coffee | #7284ff | — |
| variable.parameter.function.coffee | #f3f7ff | — |
| variable.assignment.coffee | #7284ff | — |
| variable.other.readwrite.cs | #f3f7ff | — |
| entity.name.type.class.cs, storage.type.cs | #3dd8ff | — |
| entity.name.type.namespace.cs | #5bffa5 | — |
| entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css | #7284ff | — |
| keyword.control.at-rule, keyword.control.at-rule punctuation.definition | — | 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 | — | bold |
| source.css keyword.other.unit, source.css constant.numeric | #5bffa5 | — |
| meta.attribute-selector.css entity.other.attribute-name.attribute | #7284ff | — |
| support.type.property-name.css | #f3f7ff | — |
| meta.property-value.scss, meta.property-value.scss support.type.property-name.css | #3dd8ff | — |
| source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable | #3dd8ff | — |
| meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute | #7284ff | — |
| entity.name.tag.scss, entity.name.tag.sass | #7284ff | — |
| keyword.other.unit.scss, keyword.other.unit.sass | #5bffa5 | — |
| support.function.misc.scss, support.function.misc.sass | #f293ff | — |
| meta.directive.vue entity.other.attribute-name | #5bffa5 | — |
| source.directive.vue variable.other.readwrite.js, source.directive.vue punctuation.definition.string | #7284ff | — |
| meta.directive.vue string.quoted.single.js | #7284ff | — |
| source.vue meta.tag string.quoted | #f3f7ff | — |
| 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 | #3dd8ff | — |
| source.elixir entity.name.function | #3dd8ff | — |
| source.elixir punctuation.definition.string | #f293ff | — |
| source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir | #3dd8ff | — |
| source.elixir .punctuation.binary.elixir | #5bffa5 | — |
| source.go meta.function-call.go | #3dd8ff | — |
| meta.class entity.name.type.class.js | #3dd8ff | — |
| meta.method.declaration storage.type.js | #3dd8ff | |
| terminator.js | #f3f7ff | — |
| meta.js punctuation.definition.js | #f3f7ff | — |
| variable.other.meta.import.js, meta.import.js variable.other | #5bffa5 | — |
| source.js keyword.control | #7284ff | — |
| support.type.object.module.js | #3dd8ff99 | — |
| source.js keyword.control.conditional | #7284ff | — |
| constant.numeric.hex.js | #3dd8ff | — |
| variable.parameter.function.js | #f293ff | — |
| variable.other.readwrite.js | #f3f7ff | — |
| string.quoted.double.js meta.object-literal.key | #5bffa5 | — |
| variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx | #f3f7ff | — |
| meta.jsx entity.name.tag.js, meta.jsx punctuation.definition.tag | #f3f7ff | — |
| variable.js, variable.other.js | #f3f7ff | — |
| entity.name.type.js, entity.name.type.module.js | #3dd8ff | — |
| support.class.js | #f3f7ff | — |
| meta.object-literal.key.js string.quoted, meta.object-literal.key.js | #5bffa5 | — |
| support.type.property-name.json | #7284ff | — |
| string.quoted.double.json meta.structure.dictionary.value.json, string.quoted.double.json punctuation.definition.string.json | #f293ff | — |
| meta.structure.dictionary.json meta.structure.dictionary.value constant.language | #7284ff | — |
| variable.other.ruby | #f3f7ff | — |
| constant.language.symbol.hashkey.ruby | #7284ff | — |
| entity.name.tag.less | #7284ff | — |
| meta.attribute-selector.less entity.other.attribute-name.attribute | #7284ff | — |
| markup.heading.markdown | #3dd8ff | — |
| markup.italic.markdown | #7284ff | italic |
| markup.bold.markdown | #f3f7ff | bold |
| markup.quote.markdown | #f293ff | italic |
| markup.inline.raw.markdown | #f293ff | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown | #f293ff | — |
| string.other.link.title.markdown, string.other.link.description.markdown | #f3f7ff | — |
| punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string | #3dd8ff | — |
| punctuation.definition.metadata.markdown | #7284ff | — |
| beginning.punctuation.definition.list.markdown | #5bffa5 | — |
| support.class.php | #3dd8ff | — |
| meta.function-call.php punctuation | #f3f7ff | — |
| variable.other.global.php | #3dd8ff | — |
| variable.other.global.php punctuation.definition.variable | #3dd8ff | — |
| constant.language.python | #7284ff | — |
| variable.parameter.function.python, meta.function-call.arguments.python | #f293ff | — |
| punctuation.python | #f3f7ff | — |
| entity.name.function.decorator.python | #3dd8ff | — |
| 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 | #f3f7ff | — |
| entity.name.type.ts, entity.name.type.tsx | #3dd8ff | — |
| support.class.node.ts, support.class.node.tsx | #3dd8ff | — |
| meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type | #f3f7ff | — |
| meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block | #f3f7ff | — |
| meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx | #3dd8ff | — |
| meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx | #3dd8ff | — |
| entity.name.tag.yaml | #7284ff | — |
| comment.block.javadoc keyword.other.documentation | #5bffa590 | — |
| comment.block.javadoc entity.name.type.class | #3dd8ff90 | — |
| comment.block.javadoc variable.parameter | #f293ff90 | — |
| punctuation.separator | #adaec2 | — |
| string.quoted.double.java | #3dd8ff | — |
| storage.type.generic.java | #7284ff | — |
| variable.other.object.java | #f3f7ff | — |
| meta.method-call.java entity.name.function.java | #f293ff | — |
| storage.modifier.import.java, meta.import.java storage.modifier.java | #5bffa599 | — |
| keyword.other.import.java | #f293ff99 | — |
| meta.import.java punctuation | #f3f7ff99 | — |
| 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, variable.parameter, meta.parameters, keyword.control, modifier, this, comment | — | italic |
| token.info-token | #7284ff | — |
| token.warn-token | #ff8dc6 | — |
| token.error-token | #ff8dc6 | — |
| token.debug-token | #f293ff | — |
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}!`;
}