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 — Gojo Limitless Light

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#E2E8F0
activityBar.foreground#1E293B
activityBar.inactiveForeground#94A3B8
activityBarBadge.background#4F46E5
activityBarBadge.foreground#E2E8F0
badge.background#4F46E5
badge.foreground#E2E8F0
button.background#4F46E5
button.foreground#E2E8F0
button.hoverBackground#4F46E5
dropdown.background#E2E8F0
dropdown.border#4F46E5
dropdown.foreground#1E293B
dropdown.listBackground#E2E8F0
editor.background#E2E8F0
editor.findMatchBackground#F8717160
editor.findMatchHighlightBackground#F8717130
editor.foreground#1E293B
editor.lineHighlightBackground#E2E8F0
editor.selectionBackground#4F46E540
editor.selectionHighlightBackground#4F46E520
editorBracketMatch.background#4F46E540
editorBracketMatch.border#4F46E5
editorCursor.foreground#4F46E5
editorGroupHeader.tabsBackground#E2E8F0
editorLineNumber.activeForeground#1E293B
editorLineNumber.foreground#94A3B8
editorSuggestWidget.background#E2E8F0
editorSuggestWidget.border#4F46E5
editorSuggestWidget.foreground#1E293B
editorSuggestWidget.highlightForeground#4F46E5
editorSuggestWidget.selectedBackground#E2E8F0
input.background#E2E8F0
input.border#4F46E5
input.foreground#1E293B
input.placeholderForeground#94A3B8
inputOption.activeBorder#4F46E5
list.activeSelectionBackground#CBD5E1
list.activeSelectionForeground#1E293B
list.focusBackground#CBD5E1
list.focusForeground#1E293B
list.hoverBackground#E2E8F0
list.hoverForeground#1E293B
list.inactiveSelectionBackground#E2E8F0
list.inactiveSelectionForeground#1E293B
menu.background#E2E8F0
menu.border#4F46E5
menu.foreground#1E293B
menu.selectionBackground#4F46E5
menu.selectionBorder#4F46E5
menu.selectionForeground#E2E8F0
menubar.selectionBackground#CBD5E1
menubar.selectionForeground#1E293B
notificationCenter.border#4F46E5
notificationCenterHeader.background#E2E8F0
notificationCenterHeader.foreground#1E293B
notificationLink.foreground#4F46E5
notifications.background#E2E8F0
notifications.border#4F46E5
notifications.foreground#1E293B
notificationToast.border#4F46E5
panel.background#E2E8F0
panel.border#CBD5E1
panelTitle.activeBorder#4F46E5
panelTitle.activeForeground#1E293B
panelTitle.inactiveForeground#64748B
peekView.border#4F46E5
peekViewEditor.background#E2E8F0
peekViewResult.background#E2E8F0
peekViewTitle.background#E2E8F0
quickInput.background#E2E8F0
quickInput.foreground#1E293B
quickInputList.focusBackground#CBD5E1
quickInputTitle.background#E2E8F0
sideBar.background#E2E8F0
sideBar.foreground#475569
sideBarSectionHeader.background#CBD5E1
sideBarSectionHeader.foreground#1E293B
sideBarTitle.foreground#1E293B
statusBar.background#E2E8F0
statusBar.debuggingBackground#4F46E5
statusBar.debuggingForeground#E2E8F0
statusBar.foreground#475569
statusBar.noFolderBackground#E2E8F0
statusBarItem.hoverBackground#CBD5E1
tab.activeBackground#E2E8F0
tab.activeBorderTop#4F46E5
tab.activeForeground#1E293B
tab.border#E2E8F0
tab.inactiveBackground#E2E8F0
tab.inactiveForeground#64748B
terminal.background#E2E8F0
terminal.foreground#1E293B
titleBar.activeBackground#E2E8F0
titleBar.activeForeground#1E293B
titleBar.inactiveBackground#E2E8F0
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	#059669	—
keyword, storage.type, storage.modifier	#4F46E5	—
entity.name.function, meta.function-call, support.function	#60A5FA	bold
variable, meta.definition.variable.name, support.variable	#1E293B	—
constant, variable.other.constant	#F59E0B	—
constant.numeric	#EC4899	—
keyword.operator	#4F46E5	—
entity.name.type, entity.name.class, support.type, support.class	#0284C7	—

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