Attentio
Publisher: Shaditya KinlekarThemes in package: 3
Enjoy a more focused and comfortable coding experience with Attentio!
Enjoy a more focused and comfortable coding experience with Attentio!
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 | #383a42 | — |
| comment, punctuation.definition.comment, comment.block.documentation punctuation.definition, string.comment, comment.block.documentation, comment.block | #a0a1a7 | — |
| comment.block.documentation variable, keyword.other.documentation, storage.type.class.jsdoc, comment.block variable.parameter, keyword.other.phpdoc, comment.block.documentation entity.name.type, meta.other.type.phpdoc support class | #727378 | — |
| punctuation.comma.graphql, punctuation.definition.variable, 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, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.separator.statement, punctuation.separator.parameter, punctuation.section.array.elixir, punctuation.separator.object.elixir, punctuation.section.embedded.elixir, punctuation.section.function.elixir, punctuation.section.scope.elixir, punctuation.section.embedded, meta.brace.round, meta.brace.square, meta.brace.curly, constant.name.attribute.tag.pug, punctuation.section.embedded, punctuation.separator.method, punctuation.separator, punctuation.other.comma, punctuation.bracket, keyword.control.ternary, string.interpolated.pug, support.function.interpolation.sass, punctuation.parenthesis.begin, punctuation.parenthesis.end, punctuation.operation.graphql, punctuation.colon.graphql | #7a82da | — |
| none | #383a42 | — |
| keyword.operator | #7a82da | — |
| keyword, keyword.operator.expression, keyword.operator.type.asserts, variable.language, keyword.other.special-method.elixir, meta.control.flow | #0098dd | — |
| variable, source.elixir.embedded.source, string source.groovy, string meta.embedded.line.ruby | #383a42 | — |
| entity.name.function, meta.require, support.function.any-method, meta.function-call, meta.method-call, variable.function | #23974a | — |
| support.class, entity.name.class, entity.name.type.class, meta.class.instance, meta.class.inheritance, entity.other.inherited-class, entity.name.type, variable.other.constant.elixir, storage.type.haskell, support.type.graphql, support.type.enum.graphql | #d52753 | — |
| keyword.other.special-method | #23974a | — |
| storage, constant.language | #0098dd | — |
| support.function | #23974a | — |
| string, punctuation.definition.string, support.constant.property-value, string.quoted.double.shell, support.function.variable.quoted.single.elixir, storage.type.string | #c5a332 | — |
| constant.numeric, variable.other.anonymous.elixir | #ce33c0 | — |
| none | #ce33c0 | — |
| none | #0098dd | — |
| constant, variable.other.constant, constant.other.symbol, constant.language.symbol, support.constant, support.variable.magic.python, variable.other.enummember | #823ff1 | — |
| entity.name.tag, punctuation.definition.tag | #275fe4 | — |
| entity.other.attribute-name, string.unquoted.alias.graphql | #df631c | — |
| meta.selector | #7a82da | — |
| none | #ce33c0 | — |
| markup.heading, punctuation.definition.heading, entity.name.section, markup.heading.setext | #c5a332 | |
| keyword.other.unit | #c5a332 | — |
| markup.bold, punctuation.definition.bold | #d52753 | bold |
| markup.italic, punctuation.definition.italic | #df631c | italic |
| markup.strikethrough, punctuation.definition.strikethrough | #a0a1a7 | strikethrough |
| markup.strikethrough markup.italic, markup.strikethrough markup.italic punctuation.definition.italic | #a0a1a7 | italic strikethrough |
| markup.strikethrough markup.bold, markup.strikethrough markup.bold punctuation.definition.bold | #a0a1a7 | bold strikethrough |
| markup.raw.inline | #c5a332 | — |
| string.other.link | #275fe4 | — |
| meta.link | #0098dd | — |
| beginning.punctuation.definition.list | #a05a48 | — |
| markup.quote | #823ff1 | — |
| meta.separator | #383a42 | — |
| markup.inserted | #23974a | — |
| markup.deleted | #d52753 | — |
| markup.changed | #0098dd | — |
| string.regexp | #a05a48 | — |
| constant.character.escape, constant.other.character-class | #df631c | — |
| variable.interpolation | #0098dd | — |
| invalid | #ff0000 | — |
| keyword.operator.new | #0098dd | — |
| entity.other.attribute-name.id | #d52753 | — |
| meta.function-call.arguments | #383a42 | — |
| 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.key, constant.other.object.key.js, string.unquoted.label.js, support.type.map.key, variable.graphql | #a05a48 | — |
| markup.inline.raw, markup.fenced_code.block, markup.raw.block | #a05a48 | — |
| markup.underline.link.image | #23974a | — |
| variable.parameter, parameter.variable.function.elixir, variable.other.block.ruby | #40B8C5 | — |
| support.type.primitive, support.type.builtin | #0098dd | — |
| string.interpolated.dollar.shell | #d52753 | — |
| string.other.math.shell | #275fe4 | — |
| punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell | #7a82da | — |
| comment.rainbow4 | #a05a48 | — |
| markup.bold.rainbow9 | #823ff1 | |
| invalid.rainbow10 | #df631c | — |
| comment, storage.modifier, punctuation.definition.comment, entity.other, variable.language, support.type.vendored, support.constant.vendored, markup.quote, markup.italic, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, keyword.control.clojure, source.clojure meta.symbol.dynamic, keyword.other.this.cs, keyword.other.base.cs, variable.other.member.c, support.type.core.rust, variable.other.object.property, variable.other.property, source.r meta.function.r keyword.control.r, comment.line.roxygen.r keyword, comment.line.roxygen.r variable.parameter.r, keyword.control.inheritance.coffee, comment.block.documentation.phpdoc.php keyword, keyword.other.array.phpdoc.php, storage.type.modifier, comment.block.javadoc.java keyword, comment.block.javadoc.java variable.parameter.java, keyword.operator.documentation.powershell, storage.type.scala, variable.parameter.function.language.special, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, support.function.builtin.go, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby, source.vala storage.type.generic, constant.other.table-name, constant.other.placeholder, variable.other.field, entity.alias.import.go, source.swift keyword.other.declaration-specifier, support.variable.swift, keyword.other.capture-specifier, text.tex support.function.emph, constant.other.math, support.function.textit, entity.name.footnote, entity.name.function.directive.graphql, source.graphql support.type.enum, source.ocaml entity.name.filename, source.reason entity.name.filename, abstract.definition.fsharp keyword, abstract.definition.fsharp entity, function.anonymous keyword, entity.name.record.field.accessor.elm, support.type.primitive, support.type.builtin, keyword.type.cs, storage.type.built-in, storage.type.primitive, source.python support.type.python, storage.type.core.rust, source.swift support.type, source.go storage.type, storage.type.php, storage.type.function.kotlin, entity.name.type.kotlin, support.type.julia, variable.other.member, keyword.other.import, keyword.package, keyword.import, source.wsd keyword.control.diagram, keyword.language.gherkin.feature.step, source.hlsl storage.type.basic, source.apex keyword.type, sharing.modifier, source.nim storage.type.concrete, meta.preprocessor.pragma.nim, storage.type.integral, entity.name.scope-resolution.function.call, support.class.builtin, comment.block.documentation storage.type.class, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, meta.import keyword.control, keyword.control.export, source.vue meta.directive punctuation.separator.key-value, keyword.local.lua, markup.mark.constrained markup.mark, markup.block.open, entity.name.type.primitive, entity.name.type.numeric, source.zig keyword.type, source.zig keyword.storage, source.zig keyword.structure | — | italic |
| keyword, keyword.control, keyword.operator, keyword.other.template, keyword.other.substitution, storage.type.function.arrow, constant.other.color, punctuation.accessor, entity.name.section, markdown.heading, markup.inline.raw punctuation.definition.raw, markup.heading, storage.type.function.pug, storage.type.function.python, storage.type.annotation, punctuation.bracket.angle, keyword.other.new, storage.type.generic.wildcard, source.go keyword.operator, constant.other.symbol.ruby punctuation.definition.constant.ruby, support.function.builtin.rust, storage.type.function.coffee, entity.name.variable.parameter, punctuation.separator.hash.cs, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, meta.function.parameters variable.other, entity.name.type.annotation.kotlin, storage.type.objc, parameter.variable.function, markup punctuation.definition, punctuation.section.directive, punctuation.definition.preprocessor, source.ruby punctuation.definition.variable, support.function.textbf, source.graphql support.type.builtin, source.ocaml variable.interpolation string, entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor., meta.function.parameters variable punctuation.definition.variable.php, source.wsd keyword.other.activity, keyword.control.class.ruby, keyword.control.def.ruby, keyword.function.go, keyword.other.fn.rust, markup.other.anchor, markup.list.bullet, markup.list punctuation.definition, keyword.control.default, punctuation.section, punctuation.separator, punctuation.terminator, markup.bold.markdown, source.zig storage.type.function, entity.name.type | — | bold |
| markup.quote markup.bold, text.html punctuation.section.embedded, variable.other.c, storage.modifier.lifetime.rust, entity.name.lifetime.rust, source.rust meta.attribute.rust, meta.attribute.id entity.other.attribute-name, source.ocaml punctuation.definition.tag emphasis, source.tf entity.name, markup.quote punctuation.definition, markup.fenced_code punctuation.definition, fenced_code.block.language | — | bold italic |
| keyword.control.from, keyword.control.import, keyword.control.export, variable.parameter, keyword.begin.tag.ejs, source.python meta.function.decorator.python support.type.python, source.cs keyword.other, keyword.other.var.cs, source.go keyword, storage.modifier.static.rust, variable.parameter.r, variable.parameter.handlebars, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, keyword.operator.other.powershell, source.css variable.parameter, string.interpolated variable.parameter, source.apacheconf keyword, keyword.other.julia, storage.modifier.using.vala, source.objc keyword.other.property.attribute, source.sql keyword.other, keyword.other.using.vala, keyword.operator.function.infix, keyword.control.directive, keyword.other.rust, keyword.other.declaration-specifier.swift, entity.name.function.swift, keyword.control.class, keyword.control.def, punctuation.definition.variable, entity.name.section.latex, source.ocaml keyword markup.underline, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, keyword.format.specifier.fsharp, entity.name.section.fsharp, binding.fsharp keyword, binding.fsharp keyword.symbol, record.fsharp keyword, keyword.symbol.fsharp, entity.name.section.fsharp keyword, namespace.open.fsharp keyword, namespace.open.fsharp entity, storage.type, source.cpp keyword.other, source.c keyword.other, keyword.other.unit, storage.modifier.array.bracket, meta.import.haskell keyword, keyword.declaration.dart, source.wsd keyword.other, keyword.other.skinparam, source.css keyword.control, source.css keyword.operator, keyword.language.gherkin.feature.scenario, keyword.control.cucumber.table, source.toml entity.other.attribute-name, source.toml keyword, keyword.other.nim, source.nim keyword.other.common.function, source.nim keyword.other, source.scala keyword.declaration, source.scala entity.name.class.declaration, keyword.control.lua, source.css punctuation.section, punctuation.section.embedded, source.c punctuation.section, source.cpp punctuation.section, source.java punctuation.section, source.php punctuation.section, source.powershell punctuation.section, source.r punctuation.section, source.ruby punctuation.section, source.swift punctuation.section, source.objc punctuation.section, source.zig keyword.constant.bool, source.zig keyword.default, source.zig keyword.statement, source.zig keyword.constant.default | — | |
| markup.strikethrough | — | strikethrough |
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}!`;
}