Atom Material Theme

Name: Atom Material Theme
Author: Tobias Althoff

Publisher: Tobias AlthoffThemes in package: 1

Atom Material Theme - based on Atom-Material-Ui and Atom-Material-Syntax

GitHub

VS Code preview

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

Atom Material Theme — Atom 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.

activityBar.activeBorder#009688
activityBar.background#20292e
activityBar.foreground#a7b6b8
activityBarBadge.background#009688
debugToolBar.background#232e33
diffEditor.insertedTextBackground#00ff001a
diffEditor.removedTextBackground#ff00001a
dropdown.background#20292e
editor.background#263238
editor.findMatchBackground#0096887a
editor.foreground#d4d4d4
editor.lineHighlightBackground#212b30
editor.selectionBackground#3b4d56
editorBracketMatch.background#354044
editorBracketMatch.border#FF000000
editorCursor.foreground#009688
editorGroup.dropBackground#00968828
editorGroupHeader.tabsBackground#232e33
editorLineNumber.foreground#3e4b50
editorOverviewRuler.findMatchForeground#0000ff
editorSuggestWidget.background#29363d
editorSuggestWidget.border#29363d
editorSuggestWidget.foreground#e6f5f3
editorSuggestWidget.highlightForeground#e6f5f3
editorSuggestWidget.selectedBackground#009688
editorWidget.background#232e33
editorWidget.border#29363d
focusBorder#2c383d
gitDecoration.conflictingResourceForeground#f69864
gitDecoration.deletedResourceForeground#EF5350
gitDecoration.ignoredResourceForeground#6a777a
gitDecoration.modifiedResourceForeground#FFCA28
gitDecoration.untrackedResourceForeground#8BC34A
input.background#20292e
input.foreground#ffffff
input.placeholderForeground#717e82
list.activeSelectionBackground#009688
list.activeSelectionForeground#dff5f3
list.dropBackground#009688
list.focusBackground#076b61
list.highlightForeground#eeffff
list.hoverBackground#2c383d
list.hoverForeground#a7b6b8
list.inactiveFocusBackground#009688
list.inactiveSelectionBackground#2c383d
list.inactiveSelectionForeground#dff5f3
panel.background#273237
panel.border#232e33
panelTitle.activeBorder#009688
pickerGroup.border#009688
pickerGroup.foreground#009688
scrollbar.shadow#263238
scrollbarSlider.activeBackground#a7b6b840
scrollbarSlider.background#20292e7f
scrollbarSlider.hoverBackground#20292ebf
sideBar.background#232e33
sideBar.foreground#a7b6b8
sideBarSectionHeader.background#20292e
sideBarSectionHeader.foreground#a7b6b8
sideBarTitle.foreground#bbbbbb
statusBar.background#232e33
statusBar.foreground#a7b6b8
tab.activeBackground#232e33
tab.activeBorder#009688
tab.activeForeground#eeffff
tab.border#232e33
tab.inactiveBackground#232e33
tab.inactiveForeground#a1b0b2
terminal.ansiBlack#313131
terminal.ansiBlue#4fb6f7
terminal.ansiBrightBlack#708284
terminal.ansiBrightBlue#4fb6f7
terminal.ansiBrightCyan#00b9cc
terminal.ansiBrightGreen#cddc39
terminal.ansiBrightMagenta#e23673
terminal.ansiBrightRed#ff5d4e
terminal.ansiBrightWhite#e6e5e5
terminal.ansiBrightYellow#ffcb43
terminal.ansiCyan#00b9cc
terminal.ansiGreen#cddc39
terminal.ansiMagenta#e23673
terminal.ansiRed#ff5d4e
terminal.ansiWhite#e6e5e5
terminal.ansiYellow#ffcb43
terminal.background#273237
terminal.foreground#d4d4d4
titleBar.activeBackground#222d32

tokenColors

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	—

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