Dark Modern Material

Publisher: Tauhid AhmedThemes in package: 1

Vscode dark modern theme with material feel

Open in VS Code

VS Code preview

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

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#212121
dropdown.background#212121
dropdown.border#2A2A2A
dropdown.foreground#ECEFF1
editor.background#212121
editorGroupHeader.tabsBackground#212121
input.background#212121
input.foreground#ECEFF1
input.placeholderForeground#8C8C8C
list.activeSelectionBackground#2A2A2A
list.dropBackground#3A4A5A
list.focusBackground#313131
list.hoverBackground#292929
list.inactiveSelectionBackground#262626
panel.background#212121
scrollbarSlider.activeBackground#4A4A4A
scrollbarSlider.background#313131
scrollbarSlider.hoverBackground#404040
sideBar.background#212121
sideBarSectionHeader.background#212121
sideBarSectionHeader.border#2A2A2A
sideBarSectionHeader.foreground#B0BEC5
statusBar.background#212121
statusBar.debuggingBackground#FFCC80
statusBar.foreground#B8B8B8
statusBar.noFolderBackground#212121
tab.activeBackground#212121
tab.activeBorderTop#FFCC80
tab.activeForeground#ECEFF1
tab.border#2A2A2A
tab.hoverBackground#2B2B2B
tab.inactiveBackground#1F1F1F
tab.inactiveForeground#8C8C8C
tab.unfocusedActiveBorderTop#4A4A4A
tab.unfocusedHoverBackground#292929
terminal.ansiBlack#2E2E2E
terminal.ansiBlue#90CAF9
terminal.ansiGreen#A5D6A7
terminal.ansiRed#EF9A9A
terminal.ansiWhite#ECEFF1
terminal.ansiYellow#FFEB3B
terminal.background#212121
terminal.foreground#ECEFF1
terminalCursor.foreground#FFCC80
titleBar.activeBackground#212121
titleBar.activeForeground#ECEFF1
titleBar.border#313131
titleBar.inactiveBackground#212121
titleBar.inactiveForeground#8C8C8C
tree.indentGuidesStroke#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle

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

Dark Modern Material by Tauhid Ahmed - VS Code Theme