Ziggy Theme

Publisher: Ryan DoucetteThemes in package: 1

Theme for Zigs

Open in VS Code GitHub

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.

actionBar.toggledBackground#007fd466
activityBar.background#151416
activityBar.border#baa5ff6c
activityBar.foreground#ece9ff
activityBarBadge.background#baa5ff
activityBarBadge.foreground#151416
button.background#baa5ffdc
button.foreground#151416
button.hoverBackground#baa5ff
editor.background#151416
editor.foreground#ece9ff
editor.lineHighlightBackground#26232793
editor.selectionBackground#3f3a40
editorGroupHeader.tabsBackground#171717
editorLineNumber.activeForeground#baa5ff
editorLineNumber.foreground#4d5267
focusBorder#baa5ff
icon.foreground#ece9ff
selection.background#baa5ff6c
sideBar.background#151416
sideBar.border#baa5ff6c
sideBar.foreground#ece9ff
sideBarSectionHeader.background#151416
sideBarSectionHeader.border#baa5ff6c
sideBarTitle.foreground#baa5ff
statusBar.background#151416
statusBar.border#baa5ff6c
statusBar.foreground#ece9ff
statusBar.noFolderBackground#151416
tab.activeBackground#151416
tab.activeForeground#ece9ff
tab.hoverBackground#212121
tab.inactiveBackground#171717
tab.inactiveForeground#908fa9
titleBar.activeBackground#151416
titleBar.activeForeground#ece9ff
titleBar.border#baa5ff6c
titleBar.inactiveBackground#151416
titleBar.inactiveForeground#ece9ff
window.activeBorder#ffffff8d
window.inactiveBorder#4a4a4a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#999999	italic
keyword, storage.type, keyword.control	#baa5ff	bold
entity.name.function, support.function	#f37da2	—
variable, identifier, meta.definition.variable	#ece9ff	—
string, string.quoted, string.template	#fff9b8	—
constant.numeric, number	#ffb086	—
storage.modifier, entity.name.type, support.type	#a9bfff	—
constant, support.constant, constant.language	#baa5ff	—
statement, keyword.return, keyword.throw	#f288a9	—
meta.preprocessor, meta.directive	#96e7a2	—
entity.name.tag.tsx	#a9bfff	—
source.tsx	#baa5ff	—

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

Ziggy Theme by Ryan Doucette - VS Code Theme