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 — Zenitsu (Thunder Breathing)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#0F1115
activityBar.foreground#FEF08A
activityBar.inactiveForeground#854D0E
activityBarBadge.background#EAB308
activityBarBadge.foreground#000000
badge.background#EAB308
badge.foreground#000000
button.background#EAB308
button.foreground#000000
button.hoverBackground#CA8A04
dropdown.background#181A20
dropdown.border#EAB308
dropdown.foreground#FEF08A
dropdown.listBackground#181A20
editor.background#090A0C
editor.findMatchBackground#FDE04760
editor.findMatchHighlightBackground#FDE04740
editor.foreground#FEF9C3
editor.lineHighlightBackground#1F222A
editor.selectionBackground#EAB30840
editor.selectionHighlightBackground#EAB30830
editorBracketMatch.background#EAB30840
editorBracketMatch.border#EAB308
editorCursor.foreground#FDE047
editorGroupHeader.tabsBackground#0F1115
editorLineNumber.activeForeground#FEF08A
editorLineNumber.foreground#A16207
editorSuggestWidget.background#181A20
editorSuggestWidget.border#EAB308
editorSuggestWidget.foreground#FEF08A
editorSuggestWidget.highlightForeground#FDE047
editorSuggestWidget.selectedBackground#422006
input.background#181A20
input.border#EAB308
input.foreground#FEF08A
input.placeholderForeground#CA8A04
inputOption.activeBorder#FDE047
list.activeSelectionBackground#422006
list.activeSelectionForeground#FFFFFF
list.focusBackground#422006
list.focusForeground#FFFFFF
list.hoverBackground#181A20
list.hoverForeground#FEF08A
list.inactiveSelectionBackground#181A20
list.inactiveSelectionForeground#FEF08A
menu.background#181A20
menu.border#EAB308
menu.foreground#FEF08A
menu.selectionBackground#EAB308
menu.selectionBorder#EAB308
menu.selectionForeground#000000
menubar.selectionBackground#422006
menubar.selectionForeground#FFFFFF
notificationCenter.border#EAB308
notificationCenterHeader.background#0F1115
notificationCenterHeader.foreground#FEF08A
notificationLink.foreground#FDE047
notifications.background#181A20
notifications.border#EAB308
notifications.foreground#FEF08A
notificationToast.border#EAB308
panel.background#090A0C
panel.border#A16207
panelTitle.activeBorder#FDE047
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#CA8A04
peekView.border#FDE047
peekViewEditor.background#0F1115
peekViewResult.background#090A0C
peekViewTitle.background#0F1115
quickInput.background#181A20
quickInput.foreground#FEF08A
quickInputList.focusBackground#422006
quickInputTitle.background#0F1115
scrollbarSlider.activeBackground#EAB30880
scrollbarSlider.background#A1620780
scrollbarSlider.hoverBackground#CA8A0480
sideBar.background#0F1115
sideBar.foreground#FEF08A
sideBarSectionHeader.background#090A0C
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#0F1115
statusBar.debuggingBackground#EAB308
statusBar.debuggingForeground#000000
statusBar.foreground#FEF08A
statusBar.noFolderBackground#0F1115
statusBarItem.hoverBackground#422006
tab.activeBackground#090A0C
tab.activeBorderTop#FDE047
tab.activeForeground#FFFFFF
tab.border#0F1115
tab.inactiveBackground#0F1115
tab.inactiveForeground#854D0E
terminal.background#090A0C
terminal.foreground#FEF9C3
titleBar.activeBackground#0F1115
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#0F1115
titleBar.inactiveForeground#854D0E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#A16207	italic
string, punctuation.definition.string	#FDE047	—
keyword, storage.type, storage.modifier	#EAB308	—
entity.name.function, meta.function-call, support.function	#FACC15	bold
variable, meta.definition.variable.name, support.variable	#FEF9C3	—
constant, variable.other.constant	#F87171	—
constant.numeric	#FB923C	—
keyword.operator	#EAB308	—
entity.name.type, entity.name.class, support.type, support.class	#FEF08A	—

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