Anime Theme Collection

Name: Anime Theme Collection
Author: Shams

Publisher: ShamsThemes in package: 41

A massive, aesthetic VS Code theme bundle featuring 41 premium themes inspired by iconic anime characters and worlds.

Open in VS Code GitHub

Color themes

VS Code preview

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

Anime Theme Collection — Zero Two Light (Darling)

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.

activityBar.background#FFE4E6
activityBar.foreground#BE185D
activityBar.inactiveForeground#F472B6
activityBarBadge.background#EC4899
activityBarBadge.foreground#FFFFFF
badge.background#EC4899
badge.foreground#FFFFFF
button.background#EC4899
button.foreground#FFFFFF
button.hoverBackground#DB2777
dropdown.background#FFF1F2
dropdown.border#FBCFE8
dropdown.foreground#831843
dropdown.listBackground#FFF1F2
editor.background#FFF1F2
editor.findMatchBackground#F472B660
editor.findMatchHighlightBackground#FBCFE860
editor.foreground#831843
editor.lineHighlightBackground#FCE7F3
editor.selectionBackground#FBCFE840
editor.selectionHighlightBackground#FCE7F340
editorBracketMatch.background#FBCFE8
editorBracketMatch.border#EC4899
editorCursor.foreground#DB2777
editorGroupHeader.tabsBackground#FFE4E6
editorLineNumber.activeForeground#BE185D
editorLineNumber.foreground#F472B6
editorSuggestWidget.background#FFF1F2
editorSuggestWidget.border#FBCFE8
editorSuggestWidget.foreground#831843
editorSuggestWidget.highlightForeground#EC4899
editorSuggestWidget.selectedBackground#FCE7F3
input.background#FFF1F2
input.border#FBCFE8
input.foreground#831843
input.placeholderForeground#F472B6
inputOption.activeBorder#EC4899
list.activeSelectionBackground#FCE7F3
list.activeSelectionForeground#831843
list.focusBackground#FCE7F3
list.focusForeground#831843
list.hoverBackground#FFE4E6
list.hoverForeground#831843
list.inactiveSelectionBackground#FFE4E6
list.inactiveSelectionForeground#831843
menu.background#FFF1F2
menu.border#FBCFE8
menu.foreground#831843
menu.selectionBackground#EC4899
menu.selectionBorder#EC4899
menu.selectionForeground#FFFFFF
menubar.selectionBackground#FCE7F3
menubar.selectionForeground#831843
notificationCenter.border#FBCFE8
notificationCenterHeader.background#FFE4E6
notificationCenterHeader.foreground#831843
notificationLink.foreground#EC4899
notifications.background#FFF1F2
notifications.border#FBCFE8
notifications.foreground#831843
notificationToast.border#FBCFE8
panel.background#FFF1F2
panel.border#FBCFE8
panelTitle.activeBorder#EC4899
panelTitle.activeForeground#831843
panelTitle.inactiveForeground#F472B6
peekView.border#EC4899
peekViewEditor.background#FFE4E6
peekViewResult.background#FFF1F2
peekViewTitle.background#FFE4E6
quickInput.background#FFF1F2
quickInput.foreground#831843
quickInputList.focusBackground#FCE7F3
quickInputTitle.background#FFE4E6
scrollbarSlider.activeBackground#EC489980
scrollbarSlider.background#FBCFE880
scrollbarSlider.hoverBackground#F472B680
sideBar.background#FFE4E6
sideBar.foreground#831843
sideBarSectionHeader.background#FCE7F3
sideBarSectionHeader.foreground#831843
sideBarTitle.foreground#831843
statusBar.background#FFE4E6
statusBar.debuggingBackground#EC4899
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#831843
statusBar.noFolderBackground#FFE4E6
statusBarItem.hoverBackground#FCE7F3
tab.activeBackground#FFF1F2
tab.activeBorderTop#EC4899
tab.activeForeground#831843
tab.border#FFE4E6
tab.inactiveBackground#FFE4E6
tab.inactiveForeground#F472B6
terminal.background#FFF1F2
terminal.foreground#831843
titleBar.activeBackground#FFE4E6
titleBar.activeForeground#831843
titleBar.inactiveBackground#FFE4E6
titleBar.inactiveForeground#F472B6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#F472B6	italic
string, punctuation.definition.string	#DB2777	—
keyword, storage.type, storage.modifier	#BE185D	—
entity.name.function, meta.function-call, support.function	#9D174D	bold
variable, meta.definition.variable.name, support.variable	#831843	—
constant, variable.other.constant	#E11D48	—
constant.numeric	#E11D48	—
keyword.operator	#BE185D	—
entity.name.type, entity.name.class, support.type, support.class	#9D174D	—

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