Atom Colorful Material
Publisher: Allemand InstableThemes in package: 1
A modified version of Atom Material color theme, whith added color syntax for better readability and understanding of the code
A modified version of Atom Material color theme, whith added color syntax for better readability and understanding of the 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 |
|---|---|---|
| source, punctuation.definition.dictionary, punctuation.separator.dictionary.pair, variable.other, variable.assignment, entity.name.type.instance, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.constant.css, constant.other.color, support.constant.color, meta.property-name.css, meta.property-value.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.media.begin.bracket.curly.css, punctuation.section.media.end.bracket.curly.css, punctuation.separator.list.comma.css, text.html.markdown, text.html.basic, punctuation.definition.variable.less, variable.other.object, text.jade, punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss, variable.interpolation.scss, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, string.other.link.description.title.markdown, constant.language.import-export-all.js, constant.language.import-export-all.ts, constant.language.import-export-all.tsx, meta.parameters.js, punctuation.separator.comma.js | #EEFFFF | — |
| punctuation, keyword.operator, meta.brace, support.constant, support.type.object.module.js, meta.group.regexp, string.regexp.js | #89DDF3 | — |
| support.type.property-name, string.quoted, meta.object-literal.key, source.coffee.embedded.source, string.unquoted.plain.out.yaml, string.template.js, string.interpolated.jade, support.type.builtin.graphql | #C3E88D | — |
| constant.numeric, variable.parameter.function, variable.parameter.function-call, keyword.other.unit, meta.function.definition.rust variable.other.rust, meta.function-call.arguments.r | #F78C6A | — |
| constant.language, entity.name.tag.html, entity.name.tag.structure.any.html, entity.name.tag.inline.any.html, entity.name.tag.block.any.html, constant.other.table-name.sql, constant.other.database-name.sql, entity.name.tag.xml, entity.name.tag.localname.xml, entity.name.tag.yaml, entity.name.tag.style.html, entity.name.tag.other.html, support.variable.property.js, entity.name.tag.jade, constant.name.attribute.tag.jade, entity.name.tag.js, entity.name.tag.ts, entity.name.tag.tsx, support.class.component.js, support.class.component.ts, support.class.component.tsx, support.class.component.html | #F07178 | — |
| comment, punctuation.definition.comment | #4f6875 | italic |
| storage.type, keyword.control, keyword.other.important.css, punctuation.definition.keyword, punctuation.definition.directive, storage.modifier.cs, keyword.other.class.cs, keyword.type.cs, keyword.package.go, keyword.import.go, keyword.function.go, keyword.var.go, keyword.const.go, meta.tag.sgml.doctype.html, storage.modifier.java, punctuation.definition.storage.type.objc, storage.modifier.perl, keyword.other.DML.sql, keyword.other.alias.sql, storage.modifier.async.js, support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, keyword.other.definition.ini, punctuation.definition.block.tag.jsdoc, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx, keyword.type.graphql, keyword.operator.arrow, punctuation.separator.annotation.result.python, keyword.other.fn.rust, keyword.other, storage.modifier.mut, keyword.operator.other | #f47bf4 | — |
| markup.italic.markdown, punctuation.definition.italic.markdown | #C792EA | italic |
| support.function, variable.other.property, meta.function-call.generic.python, keyword.other.special-method.ruby, entity.name.type.js, variable.other.object.property.js, entity.name.section.group-title.ini, support.variable.property.dom.js, support.variable.property.dom.ts, entity.name.type.ts, entity.name.type.tsx, variable.graphql | #82AAFF | — |
| #82AAFF | italic | |
| support.class, constant.numeric.css, entity.other.attribute-name, support.variable.object.node.js, support.variable.object.process.js, support.variable.property.process.js, support.variable.dom.js, support.constant.json.js, support.variable.dom.ts, support.type.primitive.ts, entity.name.type.interface.ts, entity.name.type.module.js, entity.name.type.module.ts, entity.name.type.module.tsx, support.variable.dom.tsx, support.type.graphql | #FFCB6B | — |
| variable.language.super, punctuation.definition.metadata.markdown, variable.language.special.self.python, variable.language.special.cls.python, punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, variable.language.this.js, variable.language.this.ts | #FF5370 | — |
| entity.name.tag | #B2CCD6 | — |
| support.type.property-name.css, support.type.property-name.media.css, support.constant.parity.css, meta.object-literal.key.js, meta.object-literal.key.ts | #73d1c8 | — |
| markup.underline.link.image.markdown, markup.underline.link.markdown | #ff869a | — |
| meta.function-call.arguments.python, meta.function.call.rust variable.other.rust | #fffeb5 | — |
| meta.item-access.arguments | #fded5e | bold |
| meta.attribute | #1dd1a1 | italic |
| entity.other.inherited-class, meta.class.inheritance | #01a3a4 | underline |
| entity.name.type.class | #FFCB6B | bold |
| meta.function.decorator | #e66767 | bold |
| constant.character.escape.python, meta.fstring.python | #00d9ff | italic |
| support.type.exception.python | #eb3b3b | bold |
| punctuation.definition.heading.markdown | #76aaa3 | bold |
| heading.1.markdown | #e66767 | bold |
| heading.2.markdown | #60e292 | bold |
| heading.3.markdown | #a193f0 | bold |
| heading.4.markdown | #f8a75b | bold |
| heading.5.markdown | #949494 | bold |
| heading.6.markdown | #d6d6d6 | bold |
| inline-dollars, punctuation.definition.raw.markdown | #ff806f | bold |
| markup.inline.raw | #ffd16f | |
| punctuation.definition.math.inline.markdown | #ff6f6f | bold |
| support.function.katex | #ffbf5f | bold |
| meta.embedded.block.katex | #ed9df5 | bold |
| punctuation.definition.list.begin.markdown | #ff6f6f | bold |
| fenced_code.block.language.markdown | #ff8fe7 | italic |
| markup.quote, markup.quote.markdown | #6dc9f3 | bold |
| markup.bold.markdown, punctuation.definition.bold.markdown | #FFCB6B | bold |
| rainbow1 | #6bffce | — |
| keyword.rainbow2 | #6bd5ff | — |
| entity.name.function.rainbow3 | #b06bff | — |
| comment.rainbow4 | #ff6b97 | — |
| string.rainbow5 | #ff956b | — |
| variable.parameter.rainbow6 | #7ee26a | — |
| constant.numeric.rainbow7 | #fff06b | — |
| entity.name.type.rainbow8 | #6b9aff | — |
| markup.bold.rainbow9 | #ff6b90 | — |
| invalid.rainbow10 | #FFCB6B | bold |
| keyword.plantuml | #fded5e | — |
| markup.bold.plantuml | #F78C6A | bold |
| string.interpolated.plantuml | #1dd1a1 | — |
| entity.name.type.plantuml | #fd6eb1 | bold |
| log.info | #1dd1a1 | bold |
| log.debug | #F78C6A | bold |
| log.warning | #fded5e | bold |
| log.error | #fd6eb1 | bold |
| log.critical | #b06bff | bold |
| log.string | #7ee26a | italic |
| entity.name.namespace, entity.namespace, keyword.operator.question | #fded5e | |
| entity.name.function.macro, entity.name.type.struct, storage.type.built-in.primitive | #fd9644 | |
| entity.name.function.macro.rules | #fc5c65 | bold |
| meta.function.definition.rust entity.name.type, meta.function.parameters.python, meta.function.environment.general.latex, meta.function.section.subsection.latex, meta.function.section.section.latex, meta.function.section.chapter.latex, meta.function-call.arguments.r variable.other.r, meta.bracket.square.access | #f5dc79 | |
| entity.name.function, entity.name.function.member, support.function.r, variable.function.r | #64beff | bold |
| punctuation.semi.rust | #eef5f1 | bold |
| constant.other.general.math | #f47bf4 | |
| punctuation.definition.constant.math | #7bd4f4 | |
| constant.character.math | #7bd4f4 | |
| variable.other.object.access | #dcadfa |
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}!`;
}