Material Design Theme

Name: Material Design Theme
Author: scung-cn

Publisher: scung-cnThemes in package: 4

The most Material Design theme now for Visual Studio Code

Open in VS Code GitHub

Color themes

VS Code preview

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

Material Design Theme — Material Design Magenta Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

actionBar.toggledBackground#d9e7cb
activityBar.activeBackground#971e95
activityBar.activeBorder#312e30
activityBar.background#810081
activityBar.foreground#ffabf3
activityBar.inactiveForeground#ffabf3
activityBarBadge.background#1e1a1d
activityBarBadge.foreground#ffabf3
breadcrumb.background#1e1a1d
breadcrumb.foreground#ffabf3
button.background#ffabf3
button.foreground#5b005b
button.hoverBackground#f29ee7
button.secondaryBackground#fcf2f200
button.secondaryForeground#ffabf3
button.secondaryHoverBackground#971e95
commandCenter.activeBackground#971e95
commandCenter.background#971e95
commandCenter.foreground#ffabf3
debugIcon.breakpointForeground#ffabf3
dropdown.background#4e444b
dropdown.border#4e444b
dropdown.foreground#e9e0e4
dropdown.listBackground#221e21
editor.background#1e1a1d
editor.foreground#e9e0e4
editor.selectionBackground#971e95
editorCursor.foreground#ffabf3
editorGroup.border#d6c2c5
editorGroup.emptyBackground#1e1a1d
editorGroupHeader.tabsBackground#810081
editorGroupHeader.tabsBorder#4e444b
editorLineNumber.activeForeground#ffabf3
editorLineNumber.foreground#971e95
editorWidget.background#810081
focusBorder#ffabf3
inlineChat.background#810081
input.background#4e444b
input.border#4e444b
input.foreground#e9e0e4
input.placeholderForeground#d1c2cb
inputOption.activeBackground#4e444b
inputOption.activeBorder#ffabf3
inputOption.activeForeground#e9e0e4
inputOption.hoverBackground#5b5157
list.activeSelectionBackground#312e30
list.activeSelectionForeground#e9e0e4
list.focusOutline#810081
list.hoverBackground#810081
list.inactiveSelectionBackground#312e30
notificationCenter.border#1e1a1d
notificationCenterHeader.background#1e1a1d
notificationCenterHeader.foreground#e9e0e4
notifications.background#1e1a1d
peekView.border#ffabf3
peekViewEditor.background#810081
peekViewResult.background#1e1a1d
peekViewTitle.background#1e1a1d
progressBar.background#971e95
scrollbarSlider.activeBackground#ffabf3
scrollbarSlider.background#971e95
scrollbarSlider.hoverBackground#ffabf3
settings.dropdownBorder#d6c2c5
settings.focusedRowBackground#d0cbcf
settings.focusedRowBorder#d6c2c5
settings.rowHoverBackground#eee9ed
sideBar.background#1e1a1d
sideBar.border#d6c2c5
sideBar.dropBackground#810081af
sideBar.foreground#e9e0e4
sideBarActivityBarTop.border#ffabf3
sideBarSectionHeader.background#1e1a1d
sideBarSectionHeader.border#d6c2c5
sideBarTitle.background#810081
sideBarTitle.foreground#ffabf3
statusBar.background#810081
statusBar.debuggingBackground#ffabf3
statusBar.debuggingForeground#1e1a1d
statusBar.foreground#ffabf3
statusBarItem.hoverBackground#971e95
statusBarItem.remoteBackground#810081
statusBarItem.remoteForeground#ffabf3
statusBarItem.remoteHoverBackground#971e95
statusBarItem.remoteHoverForeground#ffabf3
tab.activeBackground#971e95
tab.activeBorder#4e444b
tab.activeForeground#ffabf3
tab.border#810081
tab.hoverBackground#8b018a
tab.inactiveBackground#810081
tab.unfocusedActiveBackground#971e95
titleBar.activeBackground#810081
titleBar.activeForeground#ffabf3
titleBar.inactiveBackground#810081
titleBar.inactiveForeground#ffabf3
toolbar.hoverBackground#971e95
welcomePage.progress.background#4e444b
welcomePage.progress.foreground#ffabf3
welcomePage.tileBackground#810081
welcomePage.tileHoverBackground#4e444b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#AAAAAA	italic
comment.block.preprocessor	#AAAAAA
comment.documentation, comment.block.documentation	#448C27	—
invalid.illegal	#660000	—
keyword.operator	#777777	—
keyword, storage	#4B83CD	—
storage.type, support.type	#c446fa	—
constant.language, support.constant, variable.language	#AB6526	—
variable, support.variable	#f71a6e	—
entity.name.function, support.function	#16f087	bold
entity.name.type, entity.other.inherited-class, support.class	#7A3E9D	bold
entity.name.exception	#660000	—
entity.name.section	—	bold
constant.numeric, constant.character, constant	#AB6526	—
string	#448C27	—
constant.character.escape	#777777	—
string.regexp	#4B83CD	—
constant.other.symbol	#AB6526	—
punctuation	#777777	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#AAAAAA	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#91B3E0	—
entity.name.tag	#f71a6e	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#91B3E0	italic
constant.character.entity, punctuation.definition.entity	#AB6526	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#f71a6e	—
meta.property-name, support.type.property-name	#4B83CD	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#448C27	—
keyword.other.important	—	bold
markup.changed	#000000	—
markup.deleted	#000000	—
markup.italic	—	italic
markup.error	#660000	—
markup.inserted	#000000	—
meta.link	#4B83CD	—
markup.output, markup.raw	#777777	—
markup.prompt	#777777	—
markup.heading	#AA3731	—
markup.bold	—	bold
markup.traceback	#660000	—
markup.underline	—	underline
markup.quote	#7A3E9D	—
markup.list	#4B83CD	—
markup.bold, markup.italic	#448C27	—
markup.inline.raw	#AB6526
meta.diff.range, meta.diff.index, meta.separator	#434343	—
meta.diff.header.from-file	#434343	—
meta.diff.header.to-file	#434343	—

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