Black Material Theme

Name: Black Material Theme
Author: Yan Yanishevskyi

Publisher: Yan YanishevskyiThemes in package: 1

A blacked-out Material Theme for VSCode

Open in VS Code GitHub

VS Code preview

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

Black Material Theme — Black Material

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.background#000000
activityBar.border#151616
activityBarBadge.background#47edbf
activityBarBadge.foreground#000000
badge.background#828A97
badge.foreground#000000
breadcrumb.foreground#626463
breadcrumbPicker.background#151616
button.background#22262C
button.foreground#cdcecd
dropdown.background#151616
dropdown.listBackground#151616
editor.background#0b0b0b
editor.findMatchHighlightBackground#00000000
editor.findMatchHighlightBorder#ffffff40
editor.foreground#cdcecd
editor.inactiveSelectionBackground#ffffff10
editor.lineHighlightBackground#ffffff12
editor.lineHighlightBorder#00000000
editor.selectionBackground#ffffff25
editor.selectionHighlightBackground#00000000
editor.selectionHighlightBorder#ffffff40
editor.wordHighlightStrongBackground#47edbe25
editorBracketMatch.background#00000000
editorBracketMatch.border#ffffff40
editorCursor.foreground#47edbf
editorGroup.border#151616
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#151616
editorHoverWidget.background#151616
editorHoverWidget.border#202221
editorIndentGuide.activeBackground1#202221
editorIndentGuide.background1#151616
editorLineNumber.activeForeground#626463
editorLineNumber.foreground#2c2e2d
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#e97871
editorOverviewRuler.findMatchForeground#92cbc3f3
editorOverviewRuler.infoForeground#76b5e950
editorOverviewRuler.warningForeground#f2c86c50
editorPane.background#151616
editorSuggestWidget.highlightForeground#47edbf
editorWidget.background#151616
editorWidget.border#202221
editorWidget.resizeBorder#47edbf
focusBorder#ffffff30
gitDecoration.ignoredResourceForeground#424750
input.background#151616
input.border#202221
input.foreground#cdcecd
input.placeholderForeground#626463
inputOption.activeBackground#202221
inputOption.activeBorder#22262C
inputValidation.errorBorder#e97871
inputValidation.infoBorder#76b5e9
inputValidation.warningBorder#f2c86c
list.activeSelectionBackground#47edbf30
list.activeSelectionForeground#cdcecd
list.focusOutline#47edbf40
list.highlightForeground#47edbf
list.hoverBackground#47edbf20
list.inactiveSelectionBackground#47edbf20
list.inactiveSelectionForeground#cdcecd
listFilterWidget.background#424750
listFilterWidget.noMatchesOutline#e97871
menu.selectionForeground#47edbf
minimapSlider.activeBackground#ffffff12
minimapSlider.background#ffffff08
minimapSlider.hoverBackground#ffffff10
notificationLink.foreground#47edbf
notifications.background#151616
notifications.foreground#cdcecd
panel.border#151616
panelTitle.activeBorder#47edbf
pickerGroup.foreground#47edbf
progressBar.background#47edbf
scrollbarSlider.activeBackground#ffffff25
scrollbarSlider.background#ffffff15
scrollbarSlider.hoverBackground#ffffff20
settings.dropdownForeground#cdcecd
settings.focusedRowBackground#151616
settings.headerForeground#47edbf
settings.modifiedItemIndicator#47edbf
sideBar.background#000000
sideBar.border#151616
sideBar.foreground#626463
sideBarSectionHeader.background#000000
sideBarTitle.foreground#cdcecd
statusBar.background#000000
statusBar.border#151616
statusBar.debuggingBackground#050f09
statusBar.foreground#626463
statusBar.noFolderBackground#000000
statusBarItem.remoteBackground#47edbf
tab.activeBorder#47edbf
tab.border#000000
tab.inactiveBackground#000000
textLink.foreground#47edbf
titleBar.activeBackground#000000
titleBar.activeForeground#908e91
titleBar.border#151616
titleBar.inactiveBackground#040506
titleBar.inactiveForeground#626463
tree.indentGuidesStroke#151616

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, variable.parameter, variable.language, constant.character.escape, source.groovy.embedded, source.cs entity.name.type.namespace, source.cpp meta.block variable.other, source.php support.other.namespace, source.php meta.use support.class, text.html constant.character.entity.named, meta.embedded, meta.template.expression, meta.definition.variable entity.name.function, meta.function-call.arguments, meta.jsx.children, SXNested, support.variable, support.constant, punctuation.definition.entity.html	#cdcecd	—
markup.fenced_code.block	#8e8f8f	—
comment, comment punctuation.definition.comment, string.quoted.docstring, source.cs meta.preprocessor	#626463	—
entity.name.tag, entity.name.tag.yaml, text.html.markdown meta.link.inline, markup.deleted, markup.italic, markup.bold, keyword.other.definition.ini, source.cs meta.method.identifier entity.name.function, source.python meta.member.access.python, variable.object.property, support.module, support.node, support.type.property-name.json, meta.field.declaration entity.name.function, meta.link.reference, meta.block, meta.object-literal.key, meta.object-literal.key string, meta.definition.method entity.name.function, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#e97871	—
constant.numeric, keyword.other, entity.other.attribute-name.id, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f98b6f	—
constant.language.boolean, punctuation.definition.quote, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ff9e96	—
source.cs meta.class.identifier storage.type, source.cs storage.type, source.cs meta.method.return-type, entity.name.type, entity.other.inherited-class, entity.other, entity.name, entity.name.type.class, entity.other.attribute-name.class, support.type, support.class, support.class.component, support.type, constant.other.key, meta.use, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f2c86c	—
punctuation, keyword, modifier, markup.heading, markup.quote, text.html.markdown beginning.punctuation.definition.list, entity.name.section.group-title.ini, variable.language.this, support.type.object, constant.keyword, constant.other.symbol, constant.language, constant.language.json, template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, meta.tag, punctuation.definition.tag	#91dbf2	—
support.type.property-name.css, support.type.property-name.scss	#a2c4d0	—
string, markup.fenced_code.block.markdown punctuation.definition.markdown, markup.inline.raw.string.markdown, markup.inserted, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b4de89	—
entity.name.function.call, entity.name.function, meta.function entity.name.function, support.function, source.cs meta.method-call meta.method, source.cs entity.name.function, source.python meta.function-call.python, meta.function-call.arguments, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#78aeff	—
storage.type, storage.control, storage.modifier, entity.other.attribute-name, meta.structure.dictionary.json support.type.property-name.json, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ca99d6	—
markup.italic, support.module, support.node, comment, comment punctuation.definition.comment, string.quoted.docstring, keyword.control, markup.quote	—	italic
markup.bold	—	bold
markup.bold markup.italic, markup.italic markup.bold	—	italic bold
markup.underline	—	underline
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#916B53	—
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}!`;
}