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 — Luffy Gear 5 (Sun God Nika)

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#FAFAFA
activityBar.foreground#1E3A8A
activityBar.inactiveForeground#94A3B8
activityBarBadge.background#9333EA
activityBarBadge.foreground#FFFFFF
badge.background#9333EA
badge.foreground#FFFFFF
button.background#9333EA
button.foreground#FFFFFF
button.hoverBackground#7E22CE
dropdown.background#FFFFFF
dropdown.border#CBD5E1
dropdown.foreground#0F172A
dropdown.listBackground#FFFFFF
editor.background#FFFFFF
editor.findMatchBackground#FDE047
editor.findMatchHighlightBackground#FEF08A
editor.foreground#1E293B
editor.lineHighlightBackground#F1F5F9
editor.selectionBackground#E9D5FF
editor.selectionHighlightBackground#F3E8FF
editorBracketMatch.background#E9D5FF
editorBracketMatch.border#9333EA
editorCursor.foreground#9333EA
editorGroupHeader.tabsBackground#FAFAFA
editorLineNumber.activeForeground#9333EA
editorLineNumber.foreground#94A3B8
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#CBD5E1
editorSuggestWidget.foreground#0F172A
editorSuggestWidget.highlightForeground#9333EA
editorSuggestWidget.selectedBackground#F1F5F9
input.background#FFFFFF
input.border#CBD5E1
input.foreground#0F172A
input.placeholderForeground#94A3B8
inputOption.activeBorder#9333EA
list.activeSelectionBackground#F1F5F9
list.activeSelectionForeground#0F172A
list.focusBackground#F1F5F9
list.focusForeground#0F172A
list.hoverBackground#F8FAFC
list.hoverForeground#0F172A
list.inactiveSelectionBackground#F8FAFC
list.inactiveSelectionForeground#0F172A
menu.background#FFFFFF
menu.border#CBD5E1
menu.foreground#0F172A
menu.selectionBackground#9333EA
menu.selectionBorder#9333EA
menu.selectionForeground#FFFFFF
menubar.selectionBackground#F1F5F9
menubar.selectionForeground#0F172A
notificationCenter.border#CBD5E1
notificationCenterHeader.background#FAFAFA
notificationCenterHeader.foreground#0F172A
notificationLink.foreground#9333EA
notifications.background#FFFFFF
notifications.border#CBD5E1
notifications.foreground#0F172A
notificationToast.border#CBD5E1
panel.background#FFFFFF
panel.border#CBD5E1
panelTitle.activeBorder#9333EA
panelTitle.activeForeground#0F172A
panelTitle.inactiveForeground#64748B
peekView.border#9333EA
peekViewEditor.background#FAFAFA
peekViewResult.background#FFFFFF
peekViewTitle.background#FAFAFA
quickInput.background#FFFFFF
quickInput.foreground#0F172A
quickInputList.focusBackground#F1F5F9
quickInputTitle.background#FAFAFA
scrollbarSlider.activeBackground#9333EA80
scrollbarSlider.background#CBD5E180
scrollbarSlider.hoverBackground#94A3B880
sideBar.background#FAFAFA
sideBar.foreground#1E293B
sideBarSectionHeader.background#F1F5F9
sideBarSectionHeader.foreground#0F172A
sideBarTitle.foreground#0F172A
statusBar.background#FAFAFA
statusBar.debuggingBackground#9333EA
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#1E293B
statusBar.noFolderBackground#FAFAFA
statusBarItem.hoverBackground#F1F5F9
tab.activeBackground#FFFFFF
tab.activeBorderTop#9333EA
tab.activeForeground#0F172A
tab.border#FAFAFA
tab.inactiveBackground#FAFAFA
tab.inactiveForeground#64748B
terminal.background#FFFFFF
terminal.foreground#1E293B
titleBar.activeBackground#FAFAFA
titleBar.activeForeground#0F172A
titleBar.inactiveBackground#FAFAFA
titleBar.inactiveForeground#64748B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#94A3B8	italic
string, punctuation.definition.string	#D97706	—
keyword, storage.type, storage.modifier	#9333EA	—
entity.name.function, meta.function-call, support.function	#2563EB	bold
variable, meta.definition.variable.name, support.variable	#0F172A	—
constant, variable.other.constant	#DC2626	—
constant.numeric	#EAB308	—
keyword.operator	#C084FC	—
entity.name.type, entity.name.class, support.type, support.class	#1D4ED8	—

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