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 — Aizen (Hueco Mundo)

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#F3F4F6
activityBar.foreground#000000
activityBar.inactiveForeground#4B5563
activityBarBadge.background#000000
activityBarBadge.foreground#FFFFFF
badge.background#000000
badge.foreground#FFFFFF
button.background#000000
button.foreground#FFFFFF
button.hoverBackground#1F2937
dropdown.background#FFFFFF
dropdown.border#000000
dropdown.foreground#000000
dropdown.listBackground#FFFFFF
editor.background#F9FAFB
editor.findMatchBackground#EF444460
editor.findMatchHighlightBackground#FCA5A560
editor.foreground#000000
editor.lineHighlightBackground#F3F4F6
editor.selectionBackground#9CA3AF40
editor.selectionHighlightBackground#D1D5DB40
editorBracketMatch.background#D1D5DB
editorBracketMatch.border#000000
editorCursor.foreground#EF4444
editorGroupHeader.tabsBackground#F3F4F6
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#9CA3AF
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#000000
editorSuggestWidget.foreground#000000
editorSuggestWidget.highlightForeground#991B1B
editorSuggestWidget.selectedBackground#F3F4F6
input.background#FFFFFF
input.border#000000
input.foreground#000000
input.placeholderForeground#6B7280
inputOption.activeBorder#000000
list.activeSelectionBackground#E5E7EB
list.activeSelectionForeground#000000
list.focusBackground#E5E7EB
list.focusForeground#000000
list.hoverBackground#F3F4F6
list.hoverForeground#000000
list.inactiveSelectionBackground#F3F4F6
list.inactiveSelectionForeground#000000
menu.background#FFFFFF
menu.border#000000
menu.foreground#000000
menu.selectionBackground#000000
menu.selectionBorder#000000
menu.selectionForeground#FFFFFF
menubar.selectionBackground#E5E7EB
menubar.selectionForeground#000000
notificationCenter.border#000000
notificationCenterHeader.background#F3F4F6
notificationCenterHeader.foreground#000000
notificationLink.foreground#991B1B
notifications.background#FFFFFF
notifications.border#000000
notifications.foreground#000000
notificationToast.border#000000
panel.background#F9FAFB
panel.border#D1D5DB
panelTitle.activeBorder#000000
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#6B7280
peekView.border#000000
peekViewEditor.background#F3F4F6
peekViewResult.background#F9FAFB
peekViewTitle.background#F3F4F6
quickInput.background#FFFFFF
quickInput.foreground#000000
quickInputList.focusBackground#E5E7EB
quickInputTitle.background#F3F4F6
scrollbarSlider.activeBackground#4B556380
scrollbarSlider.background#D1D5DB80
scrollbarSlider.hoverBackground#9CA3AF80
sideBar.background#F3F4F6
sideBar.foreground#000000
sideBarSectionHeader.background#E5E7EB
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000
statusBar.background#F3F4F6
statusBar.debuggingBackground#000000
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#000000
statusBar.noFolderBackground#F3F4F6
statusBarItem.hoverBackground#E5E7EB
tab.activeBackground#F9FAFB
tab.activeBorderTop#000000
tab.activeForeground#000000
tab.border#D1D5DB
tab.inactiveBackground#F3F4F6
tab.inactiveForeground#4B5563
terminal.background#F9FAFB
terminal.foreground#000000
titleBar.activeBackground#F3F4F6
titleBar.activeForeground#000000
titleBar.inactiveBackground#F3F4F6
titleBar.inactiveForeground#4B5563

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9CA3AF	italic
string, punctuation.definition.string	#4B5563	—
keyword, storage.type, storage.modifier	#000000	bold
entity.name.function, meta.function-call, support.function	#1F2937	bold
variable, meta.definition.variable.name, support.variable	#000000	—
constant, variable.other.constant	#7F1D1D	—
constant.numeric	#991B1B	—
keyword.operator	#000000	—
entity.name.type, entity.name.class, support.type, support.class	#111827	underline

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