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 Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

actionBar.toggledBackground#d9e7cb
activityBar.activeBackground#f4b4c9
activityBar.activeBorder#fac8d6
activityBar.background#ffd9e1
activityBar.foreground#c0295c
activityBar.inactiveForeground#c0295c
activityBarBadge.background#fffbff
activityBarBadge.foreground#c0295c
breadcrumb.background#fffbff
breadcrumb.foreground#c0295c
button.background#ba005c
button.hoverBackground#bf1469
button.secondaryBackground#fcf2f200
button.secondaryForeground#bf1469
button.secondaryHoverBackground#f4b4c9
commandCenter.activeBackground#f4b4c9
commandCenter.background#f4b4c9
commandCenter.foreground#c0295c
debugIcon.breakpointForeground#c0295c
dropdown.background#f3dde1
dropdown.border#e998b3
dropdown.foreground#201a1b
dropdown.listBackground#f7ebec
editor.background#fffbff
editor.foreground#262a23
editor.selectionBackground#f4b4c9
editorCursor.foreground#c0295c
editorGroup.border#d6c2c5
editorGroup.emptyBackground#fffbff
editorGroupHeader.tabsBackground#ffd9e1
editorGroupHeader.tabsBorder#f3dde1
editorLineNumber.activeForeground#c0295c
editorLineNumber.foreground#f4b4c9
editorWidget.background#ffd9e1
focusBorder#ba005c
inlineChat.background#ffd9e1
input.background#f3dde1
input.border#e998b3
input.foreground#201a1b
input.placeholderForeground#514346
inputOption.activeBackground#f3dde1
inputOption.activeBorder#b9005c
inputOption.activeForeground#201a1b
inputOption.hoverBackground#e3ced1
list.activeSelectionBackground#fac8d6
list.activeSelectionForeground#201a1b
list.focusOutline#ffd9e1
list.hoverBackground#ffd9e1
list.inactiveSelectionBackground#fac8d6
notificationCenter.border#fffbff
notificationCenterHeader.background#fffbff
notificationCenterHeader.foreground#262a23
notifications.background#fffbff
peekView.border#c0295c
peekViewEditor.background#ffd9e1
peekViewResult.background#fffbff
peekViewTitle.background#fffbff
progressBar.background#f4b4c9
scrollbarSlider.activeBackground#c0295c
scrollbarSlider.background#f4b4c9
scrollbarSlider.hoverBackground#c0295c
settings.dropdownBorder#d6c2c5
settings.focusedRowBackground#d0cbcf
settings.focusedRowBorder#d6c2c5
settings.rowHoverBackground#eee9ed
sideBar.background#fffbff
sideBar.border#d6c2c5
sideBar.dropBackground#ffd9e1af
sideBar.foreground#201a1b
sideBarActivityBarTop.border#b9005c
sideBarSectionHeader.background#fffbff
sideBarSectionHeader.border#d6c2c5
sideBarTitle.background#ffd9e1
sideBarTitle.foreground#c0295c
statusBar.background#ffd9e1
statusBar.debuggingBackground#c0295c
statusBar.debuggingForeground#fffbff
statusBar.foreground#c0295c
statusBarItem.hoverBackground#f4b4c9
statusBarItem.remoteBackground#ffd9e1
statusBarItem.remoteForeground#c0295c
statusBarItem.remoteHoverBackground#f4b4c9
statusBarItem.remoteHoverForeground#c0295c
tab.activeBackground#f4b4c9
tab.activeBorder#f3dde1
tab.activeForeground#c0295c
tab.border#ffd9e1
tab.hoverBackground#fac8d6
tab.inactiveBackground#ffd9e1
tab.unfocusedActiveBackground#f4b4c9
titleBar.activeBackground#ffd9e1
titleBar.activeForeground#c0295c
titleBar.inactiveBackground#ffd9e1
titleBar.inactiveForeground#c0295c
toolbar.hoverBackground#f4b4c9
welcomePage.progress.background#e998b3
welcomePage.progress.foreground#c0295c
welcomePage.tileBackground#ffd9e1
welcomePage.tileHoverBackground#e998b3

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	#005cbb	—
invalid.illegal	#660000	—
keyword.operator	#777777	—
keyword, storage	#db084e	—
storage.type, support.type	#f1388b	—
constant.language, support.constant, variable.language	#AB6526	—
variable, support.variable	#0e2740	—
entity.name.function, support.function	#c0295c	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	#e998b3	—
entity.name.tag	#c0295c	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#e998b3	italic
constant.character.entity, punctuation.definition.entity	#AB6526	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#c0295c	—
meta.property-name, support.type.property-name	#f70b5a	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#005cbb	—
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	—
markup.fenced_code.block, markup.inline.raw.string	#333333	italic

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