Material Theme Revived (Atom Fork)
Publisher: HexThemes in package: 1
Material Design dark theme for VS Code — a community-maintained fork of the original Atom Material Theme
Material Design dark theme for VS Code — a community-maintained fork of the original Atom Material Theme
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, meta.paragraph.markdown, 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, source.js-ignored-vscode | #89DDF3 | — |
| support.type.property-name, string.quoted, meta.object-literal.key, source.coffee.embedded.source, entity.name.section.markdown, punctuation.definition.heading.markdown, string.unquoted.plain.out.yaml, string.template.js, string.interpolated.jade, support.type.builtin.graphql | #C3E88D | — |
| constant.numeric, variable.parameter.function, keyword.other.unit | #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, markup.italic.markdown, punctuation.definition.italic.markdown, 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.other.default | #C792EA | — |
| markup.italic.markdown, punctuation.definition.italic.markdown | #C792EA | italic |
| entity.name.function, support.function, variable.other.property, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown, 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 | — |
| markup.quote.markdown | #82AAFF | italic |
| support.class, entity.name.type.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, entity.other.inherited-class, 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 | — |
| markup.bold.markdown, punctuation.definition.bold.markdown | #FFCB6B | bold |
| variable.language.super, punctuation.definition.metadata.markdown, variable.language.special.self.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 | — |
| entity.name.type.type-parameter, entity.name.type.type-parameter.ts, entity.name.type.type-parameter.tsx, meta.type.parameters.ts, meta.type.parameters.tsx, meta.type.parameters.js | #FF5370 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.interpolation, punctuation.definition.interpolation, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.tsx | #F78C6A | — |
| string.template.js, string.template.ts, string.template.tsx, string.template | #C3E88D | — |
| punctuation.decorator, meta.decorator, entity.name.function.decorator, entity.name.function.decorator.python, meta.decorator.python, meta.decorator.argument.python, punctuation.definition.decorator.python | #C792EA | — |
| meta.function.decorator.python, entity.name.function.decorator.python | #82AAFF | — |
| meta.type.annotation.python, meta.function.parameters.python, meta.function.return-type.python, support.type.python | #FFCB6B | — |
| meta.function.parameters.python | #EEFFFF | — |
| keyword.other.fn.rust, keyword.other.rust, keyword.rust, storage.type.rust, storage.modifier.rust, keyword.const.rust, keyword.fn.rust, keyword.let.rust, keyword.mut.rust, keyword.pub.rust, keyword.ref.rust, keyword.use.rust, keyword.crate.rust, keyword.mod.rust, keyword.struct.rust, keyword.enum.rust, keyword.impl.rust, keyword.trait.rust, keyword.type.rust, keyword.match.rust, keyword.loop.rust, keyword.while.rust, keyword.for.rust, keyword.if.rust, keyword.else.rust, keyword.return.rust, keyword.self.rust, keyword.super.rust, keyword.static.rust, keyword.extern.rust, keyword.unsafe.rust, keyword.move.rust, keyword.async.rust, keyword.await.rust, keyword.dyn.rust, keyword.where.rust | #C792EA | — |
| entity.name.type.rust, support.class.rust, support.type.rust, entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust | #FFCB6B | — |
| entity.name.function.macro.rust, entity.name.function.macro.rules.rust, entity.name.type.macro.rust, entity.name.type.macro.rules.rust | #82AAFF | — |
| constant.language.rust, support.constant.std.rust, meta.attribute.rust | #F07178 | — |
| string.quoted.double.rust, string.quoted.single.rust, string.raw.string.rust | #C3E88D | — |
| entity.name.function.rust, support.function.rust | #82AAFF | — |
| keyword.other.self.rust, variable.language.self.rust, variable.language.super.rust | #FF5370 | — |
| support.class.builtin.js, support.class.builtin.ts, support.class.builtin.tsx, support.class.builtin | #FFCB6B | — |
| keyword.operator.expression.typeof, keyword.operator.expression.keyof, keyword.operator.expression.instanceof, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.optional, keyword.operator.nullish, keyword.operator.nullable, keyword.operator.assignment.compound | #89DDF3 | — |
| meta.tag.attributes.js, meta.tag.attributes.jsx, meta.tag.attributes.tsx, meta.tag.attributes.html, meta.tag.other.html, meta.tag.inline.js, meta.tag.inline.tsx | #EEFFFF | — |
| entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.tsx, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #FFCB6B | — |
| markup.inline.raw.string.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.language.markdown | #C3E88D | — |
| markup.heading.1.markdown, punctuation.definition.heading.1.markdown | #EEFFFF | bold |
| markup.heading.2.markdown, punctuation.definition.heading.2.markdown | #C3E88D | bold |
| markup.heading.3.markdown, punctuation.definition.heading.3.markdown | #82AAFF | — |
| punctuation.definition.list.begin.markdown, punctuation.definition.list.end.markdown, punctuation.definition.list.markdown | #89DDF3 | — |
| meta.separator.markdown | #3e4b50 | — |
| string.regexp.ts, string.regexp.tsx, string.regexp.js, constant.character.escape.regexp, keyword.control.anchor.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp | #F78C6A | — |
| storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx | #C792EA | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, keyword.operator.class.php, keyword.operator.type.php | #89DDF3 | — |
| variable.language.self.php, variable.language.parent.php | #FF5370 | — |
| entity.name.function.php, support.function.php | #82AAFF | — |
| punctuation.terminator.statement.go, punctuation.definition.string.begin.go, punctuation.definition.string.end.go, punctuation.definition.string.raw.begin.go, punctuation.definition.string.raw.end.go | #89DDF3 | — |
| constant.language.go | #F07178 | — |
| storage.type.int.go, storage.type.float.go, storage.type.string.go, storage.type.bool.go, storage.type.uint.go, storage.type.error.go, storage.type.byte.go, storage.type.rune.go | #FFCB6B | — |
| keyword.operator.logical.sql, keyword.operator.comparison.sql, keyword.operator.arithmetic.sql | #89DDF3 | — |
| storage.type.sql | #FFCB6B | — |
| meta.function.python, meta.function-call.python, support.function.builtin.python, support.function.magic.python | #82AAFF | — |
| constant.language.python, constant.language.None.python, constant.language.True.python, constant.language.False.python, constant.language.python | #F07178 | — |
| keyword.operator.logical.python, keyword.operator.logical.python | #C792EA | — |
| variable.language.special.self.python | #FF5370 | — |
| punctuation.definition.string.begin.python, punctuation.definition.string.end.python, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell | #C3E88D | — |
| string.regexp.python, string.regexp.shell | #F78C6A | — |
| meta.function-call.arguments.python | #EEFFFF | — |
| meta.tag.sgml.doctype.html, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #89DDF3 | — |
| punctuation.separator.key-value.html, punctuation.separator.key-value.css, punctuation.separator.key-value.scss, punctuation.separator.key-value.less | #89DDF3 | — |
| entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.tsx | #FFCB6B | — |
| punctuation.definition.tag.css, punctuation.definition.tag.scss, punctuation.definition.tag.less | #89DDF3 | — |
| entity.name.function.scss, entity.name.function.less, entity.name.function.sass | #82AAFF | — |
| keyword.control.at-rule.scss, keyword.control.at-rule.less, keyword.control.at-rule.sass | #C792EA | — |
| variable.scss, variable.less, variable.sass | #EEFFFF | — |
| meta.function-call.generic.python | #82AAFF | — |
| meta.function-call.python | #82AAFF | — |
| constant.character.escape.python | #F78C6A | — |
| string.interpolated.python | #F78C6A | — |
| storage.type.null.java | #F07178 | — |
| constant.language.java | #F07178 | — |
| entity.name.function.java | #82AAFF | — |
| storage.type.java, storage.type.primitive.java | #FFCB6B | — |
| keyword.other.import.java | #C792EA | — |
| entity.name.function.cs | #82AAFF | — |
| storage.type.cs, storage.type.primitive.cs | #FFCB6B | — |
| keyword.other.using.cs, keyword.other.namespace.cs | #C792EA | — |
| entity.name.function.ruby | #82AAFF | — |
| keyword.other.special-method.ruby | #82AAFF | — |
| variable.other.constant.ruby | #FFCB6B | — |
| constant.language.symbol.ruby | #F07178 | — |
| punctuation.definition.string.begin.ruby, punctuation.definition.string.end.ruby | #C3E88D | — |
| keyword.operator.logical.js, keyword.operator.logical.ts, keyword.operator.logical.tsx, keyword.operator.logical.jsx | #89DDF3 | — |
| keyword.operator.assignment.js, keyword.operator.assignment.ts, keyword.operator.assignment.tsx, keyword.operator.assignment.jsx | #89DDF3 | — |
| keyword.operator.ternary.js, keyword.operator.ternary.ts, keyword.operator.ternary.tsx, keyword.operator.ternary.jsx | #89DDF3 | — |
| keyword.operator.arithmetic.js, keyword.operator.arithmetic.ts, keyword.operator.arithmetic.tsx, keyword.operator.arithmetic.jsx, keyword.operator.arithmetic.css, keyword.operator.arithmetic.scss, keyword.operator.arithmetic.less, keyword.operator.arithmetic.sass | #89DDF3 | — |
| keyword.operator.bitwise.js, keyword.operator.bitwise.ts, keyword.operator.bitwise.tsx, keyword.operator.bitwise.jsx | #89DDF3 | — |
| keyword.operator.comparison.js, keyword.operator.comparison.ts, keyword.operator.comparison.tsx, keyword.operator.comparison.jsx | #89DDF3 | — |
| keyword.operator.increment.js, keyword.operator.increment.ts, keyword.operator.increment.tsx, keyword.operator.increment.jsx, keyword.operator.decrement.js, keyword.operator.decrement.ts, keyword.operator.decrement.tsx, keyword.operator.decrement.jsx | #89DDF3 | — |
| keyword.operator.relational.js, keyword.operator.relational.ts, keyword.operator.relational.tsx, keyword.operator.relational.jsx | #89DDF3 | — |
| keyword.operator.type.js, keyword.operator.type.ts, keyword.operator.type.tsx, keyword.operator.type.jsx | #89DDF3 | — |
| keyword.operator.new.js, keyword.operator.new.ts, keyword.operator.new.tsx, keyword.operator.new.jsx | #C792EA | — |
| keyword.operator.delete.js, keyword.operator.delete.ts, keyword.operator.delete.tsx, keyword.operator.delete.jsx | #C792EA | — |
| keyword.operator.void.js, keyword.operator.void.ts, keyword.operator.void.tsx, keyword.operator.void.jsx | #C792EA | — |
| keyword.operator.in.js, keyword.operator.in.ts, keyword.operator.in.tsx, keyword.operator.in.jsx | #89DDF3 | — |
| keyword.operator.instanceof.js, keyword.operator.instanceof.ts, keyword.operator.instanceof.tsx, keyword.operator.instanceof.jsx | #89DDF3 | — |
| keyword.operator.expression.keyof.js, keyword.operator.expression.keyof.ts, keyword.operator.expression.keyof.tsx, keyword.operator.expression.keyof.jsx | #89DDF3 | — |
| keyword.operator.expression.typeof.js, keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.tsx, keyword.operator.expression.typeof.jsx | #89DDF3 | — |
| keyword.operator.spread.js, keyword.operator.spread.ts, keyword.operator.spread.tsx, keyword.operator.spread.jsx | #89DDF3 | — |
| keyword.operator.rest.js, keyword.operator.rest.ts, keyword.operator.rest.tsx, keyword.operator.rest.jsx | #89DDF3 | — |
| keyword.operator.optional.js, keyword.operator.optional.ts, keyword.operator.optional.tsx, keyword.operator.optional.jsx | #89DDF3 | — |
| keyword.operator.nullable.js, keyword.operator.nullable.ts, keyword.operator.nullable.tsx, keyword.operator.nullable.jsx | #89DDF3 | — |
| keyword.operator.nullish.js, keyword.operator.nullish.ts, keyword.operator.nullish.tsx, keyword.operator.nullish.jsx | #89DDF3 | — |
| keyword.operator.assignment.compound.js, keyword.operator.assignment.compound.ts, keyword.operator.assignment.compound.tsx, keyword.operator.assignment.compound.jsx | #89DDF3 | — |
| keyword.operator.assignment.compound.bitwise.js, keyword.operator.assignment.compound.bitwise.ts, keyword.operator.assignment.compound.bitwise.tsx, keyword.operator.assignment.compound.bitwise.jsx | #89DDF3 | — |
| keyword.operator.assignment.compound.arithmetic.js, keyword.operator.assignment.compound.arithmetic.ts, keyword.operator.assignment.compound.arithmetic.tsx, keyword.operator.assignment.compound.arithmetic.jsx | #89DDF3 | — |
| keyword.operator.arithmetic.js, keyword.operator.arithmetic.ts, keyword.operator.arithmetic.tsx, keyword.operator.arithmetic.jsx | #89DDF3 | — |
| keyword.operator.increment.js, keyword.operator.increment.ts, keyword.operator.increment.tsx, keyword.operator.increment.jsx | #89DDF3 | — |
| keyword.operator.decrement.js, keyword.operator.decrement.ts, keyword.operator.decrement.tsx, keyword.operator.decrement.jsx | #89DDF3 | — |
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}!`;
}