Materia

Name: Materia
Author: Martin Thorsen

Publisher: Martin ThorsenThemes in package: 3

A neutral material theme

GitHub

Color themes

VS Code preview

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

Materia — Materia

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#28A6FF
activityBar.background#272727
editor.background#242424
editor.lineHighlightBackground#1A1A1A
editor.selectionBackground#EFF1
editorGroup.border#303030
editorGroupHeader.tabsBackground#0000
editorLineNumber.activeForeground#EFF7
editorLineNumber.foreground#EFF2
editorRuler.foreground#EFF1
focusBorder#EFF1
gitDecoration.addedResourceForeground#AD8
gitDecoration.deletedResourceForeground#F57
gitDecoration.ignoredResourceForeground#EFF5
gitDecoration.modifiedResourceForeground#FC7
list.activeSelectionBackground#EFF2
panel.background#242424
panel.border#303030
panelTitle.activeBorder#28A6FF
quickInput.foreground#EFF7
sideBar.background#272727
sideBar.border#303030
sideBar.foreground#EFF8
sideBarSectionHeader.background#0000
statusBar.background#272727
statusBar.border#303030
statusBar.foreground#EFF7
statusBarItem.remoteBackground#0000
statusBarItem.remoteForeground#EFF8
tab.activeBackground#0000
tab.activeBorder#28A6FF
tab.border#0000
tab.inactiveBackground#0000
terminal.ansiBlue#46B
terminal.ansiBrightBlue#8AF
terminal.ansiBrightCyan#6CD
terminal.ansiBrightGreen#AD8
terminal.ansiBrightMagenta#C8D
terminal.ansiBrightRed#F57
terminal.ansiBrightYellow#FC7
terminal.ansiCyan#18A
terminal.ansiGreen#584
terminal.ansiMagenta#93A
terminal.ansiRed#A44
terminal.ansiWhite#EFF8
terminal.ansiYellow#A65
terminal.border#0000
titleBar.activeBackground#303030
titleBar.inactiveForeground#EFF7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
Keyword, Storage, comment, keyword.control, punctuation.definition.comment, punctuation.definition.block.tag.jsdoc, meta.other.type.phpdoc.php punctuation, entity.name.type.instance.jsdoc, punctuation.definition.bracket, variable.other.jsdoc, storage.type.class.jsdoc, comment.block.documentation.phpdoc.php keyword.other.phpdoc.php, comment.block.documentation.phpdoc.php punctuation.separator.inheritance.php, comment.block.documentation.phpdoc.php support.other.namespace.php, comment.block.documentation.phpdoc.php support.class, comment.block.documentation.phpdoc.php keyword.other, markup.italic, markup.quote markup.italic, markup.quote markup.italic punctuation.definition.italic.markdown, markup.quote markup.italic string, punctuation.definition.italic.markdown, variable.language, source.js constant.other.object.key.js string.unquoted.label.js, entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, support.type.vendored.property-name.css	—	italic
meta.separator, markup.bold, markup.bold string, punctuation.definition.bold.markdown, markup.bold markup.italic, markup.italic markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold, markup.quote markup.bold punctuation.definition.bold.markdown, markup.quote markup.bold string	—	bold
url, link, uri, markup.underline	—	underline
source.css entity.other.attribute-name	—
constant.other.color, meta.selector.css	#FFF	—
variable, support.variable, support.variable.property.js, string constant.other.placeholder, meta.object-literal.key.js, text.html.markdown, punctuation.definition.list_item.markdown, markup.table	#EFF	—
meta.object-literal.key.js, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type	#EFFC	—
support.type.vendored.property-name.css, markup.quote, markup.quote markup.italic, markup.quote markup.italic punctuation.definition.italic.markdown, markup.quote markup.italic string, markup.quote markup.bold, markup.quote markup.bold punctuation.definition.bold.markdown, markup.quote markup.bold string	#EFF8	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown, text.html.markdown meta.dummy.line-break, markup.quote punctuation.definition.blockquote.markdown, variable.language.fenced.markdown, meta.separator, punctuation.definition.bracket, punctuation.definition.comment, comment, comment.block.documentation.js punctuation.definition.block.tag.jsdoc, comment.block.documentation.js entity.name.type.instance.jsdoc, comment.block.documentation.js storage.type.class.jsdoc, comment.block.documentation.js variable.other.jsdoc, comment.block.documentation.phpdoc.php punctuation, comment.block.documentation.phpdoc.php support, comment.block.documentation.phpdoc.php keyword	#EFF5	—
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted, markup.inserted.git_gutter, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, entity.other.inherited-class, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#AD8	—
constant.other.color, 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, keyword.other.template, keyword.other.substitution, meta.array.literal.js, meta.brace.round.js, keyword.operator.logical.js, string.regexp, constant.character.escape, markup.italic, punctuation.definition.italic.markdown, source.vue invalid.illegal.character-not-allowed-here.html, source.vue punctuation.definition.tag.begin.html, source.vue punctuation.definition.tag.end.html	#8DF	—
keyword, keyword.control, keyword.other.phpdoc.php, keyword.other.function.use.php, storage.type, storage.modifier, markup.changed, markup.raw.block, text.html.markdown markup.inline.raw.markdown, string.other.link.description.title.markdown, beginning.punctuation.definition.list.markdown	#C8D	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, variable.function.constructor, source.sass keyword.control, string.other.link.title.markdown, entity.name.method.js, meta.class-method.js entity.name.function.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#8AF	—
entity.name, entity.other.attribute-name, support.type, support.class, markup.changed.git_gutter, support.type.sys-types, support.constant, constant.other.reference.link.markdown, support.orther.namespace.use.php, support.variable.dom.js, meta.use.php, support.other.namespace.php, entity.other.inherited-class.php, constant.other.php, constant.other.class.php, meta.function.parameter.typehinted.php storage.type.php, source.vue invalid.deprecated.entity.other.attribute-name.html	#FC7	—
invalid, invalid.illegal, variable.parameter.function.language.special, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, variable.language, markup.deleted, source.js constant.other.object.key.js string.unquoted.label.js	#F57	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, source.cpp meta.block variable.other, support.other.variable, string.other.link, markup.bold, markup.bold string, markup.bold markup.italic, markup.italic markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, punctuation.definition.bold.markdown	#E77	—
support.class.component.html, constant.numeric, constant.language, support.constant, variable.other.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, meta.function.parameters.php variable, meta.function.closure.use.php variable, markdown.heading, markup.underline, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#F85	—

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