Awesome Material Theme

Name: Awesome Material Theme
Author: Federico Marcos

Publisher: Federico MarcosThemes in package: 1

Awesome Material Theme based on sublime material colors

Open in VS Code GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Awesome Material Theme — Awesome Material Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

editor.background#212121
editor.foreground#cad3de
editor.lineHighlightBackground#11111150
editor.selectionBackground#dddddd20
editorCursor.foreground#82b1ffd1
editorIndentGuide.background#37474f80
editorWhitespace.foreground#65737e
statusBar.background#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#cad3deff	—
comment, punctuation.definition.comment	#545454	italic
variable, string constant.other.placeholder	#CAD3DE	—
constant.other.color	#76D4FF	—
invalid, invalid.illegal, invalid.broken	#ffffff	—
invalid.unimplemented	#ffffff	—
invalid.deprecated	#ffffff	—
keyword, storage.type, storage.modifier	#C792EA	—
storage.type, keyword.control	#C792EA	—
keyword.operator, constant.other.color, keyword.other.template, keyword.other.substitution	#FFCB6B	—
punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded	#CAD3DE	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#FF5370	—
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level	#82B1FF	—
variable.function	#CAD3DE	—
support.other.variable, string.other.link	#CAD3DE	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#6DC2B8	—
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#C3E88D	normal
entity.name.class, entity.other.inherited-class, entity.name.type.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#FFCB6B	—
support.class, support.type.sys-types	#F77669	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	—
entity.name.method.js	#82AAFF	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#FFCB6B	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#C3E887	—
constant.character.escape	#C3E887	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#C17E70	—
entity.name.filename.find-in-files	#C3E88D	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C3E88D	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C792EA	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#f07178	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#82AAFF	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C17E70	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#FF5370	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#F78C6C	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#FFCB6B	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C792EA	—
text.html.markdown, punctuation.definition.list_item.markdown	#CAD3DE	—
text.html.markdown markup.raw.inline	#C792EA	—
text.html.markdown punctuation.definition.raw.markdown	#65737e	—
text.html.markdown meta.dummy.line-break		—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	—	bold italic
markup.underline	#F78C6C	underline
markup.strike		strike
markup.quote punctuation.definition.blockquote.markdown	#65737e	—
markup.quote		italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	—	—
punctuation.definition.fenced.markdown	—	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#eeffff	—
variable.language.fenced.markdown	#65737e
text.html.markdown punctuation.definition	#546E7A	—
text.html.markdown meta.disable-markdown punctuation.definition	#89DDFF	—
meta.separator	#65737e	bold
markup.table	#eeffff	—
acejump.label.blue	#ffffff	—
acejump.label.green	#ffffff	—
acejump.label.orange	#ffffff	—
acejump.label.purple	#ffffff	—
sublimelinter.mark.warning	#FFCB6B	—
sublimelinter.gutter-mark	#ffffff	—
sublimelinter.mark.error	#FF5370	—
sublimelinter.annotations	—	—
markup.ignored.git_gutter	#65737e	—
markup.untracked.git_gutter	#65737e	—
markup.inserted.git_gutter	#C3E88D	—
markup.changed.git_gutter	#FFCB6B	—
markup.deleted.git_gutter	#FF5370	—
brackethighlighter.default	#B2CCD6	—
brackethighlighter.quote	#C3E88D	—
brackethighlighter.unmatched	#FF5370	—
meta.function-call.arguments	#CAD3DE	—
support.type	#82B1FF	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}