Demon Slayer Breathing Themes

Publisher: fidelp27Themes in package: 4

VS Code themes inspired by Demon Slayer breathing techniques - Water, Flame, Thunder, and Insect styles with vibrant anime colors

Open in VS Code GitHub

Color themes

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#071122
activityBar.foreground#4da6ff
activityBarBadge.background#00d4ff
editor.background#0a1628
editor.foreground#c9e6ff
editor.selectionBackground#1a3a5c77
editorCursor.foreground#00d4ff
editorLineNumber.activeForeground#4da6ff
editorLineNumber.foreground#1a3a5c
sideBar.background#0d1a2d
sideBar.foreground#a8d5ff
sideBarTitle.foreground#4da6ff
statusBar.background#06binoc
statusBar.foreground#4da6ff
tab.activeBackground#0f1f35
tab.activeForeground#00d4ff
tab.inactiveBackground#0a1628
terminal.ansiBlue#4da6ff
terminal.ansiCyan#00d4ff
terminal.ansiGreen#4dffb8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#4d7a99	italic
string	#00d4ff	—
constant.numeric	#66ccff	—
keyword	#4da6ff	bold
entity.name.function	#80e5ff	bold
entity.name.class	#99d6ff	bold

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