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 Hollow Purple

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#1A0B2E
activityBar.foreground#E2E8F0
activityBar.inactiveForeground#6B4994
activityBarBadge.background#A855F7
activityBarBadge.foreground#FFFFFF
badge.background#A855F7
badge.foreground#FFFFFF
button.background#9333EA
button.foreground#FFFFFF
button.hoverBackground#7E22CE
dropdown.background#140824
dropdown.border#7E22CE
dropdown.foreground#E2E8F0
dropdown.listBackground#140824
editor.background#10061C
editor.findMatchBackground#EF444460
editor.findMatchHighlightBackground#EF444440
editor.foreground#E2E8F0
editor.lineHighlightBackground#1D0B36
editor.selectionBackground#A855F740
editor.selectionHighlightBackground#A855F730
editorBracketMatch.background#A855F740
editorBracketMatch.border#A855F7
editorCursor.foreground#A855F7
editorGroupHeader.tabsBackground#1A0B2E
editorLineNumber.activeForeground#C084FC
editorLineNumber.foreground#6B4994
editorSuggestWidget.background#140824
editorSuggestWidget.border#7E22CE
editorSuggestWidget.foreground#E2E8F0
editorSuggestWidget.highlightForeground#A855F7
editorSuggestWidget.selectedBackground#1D0B36
input.background#140824
input.border#7E22CE
input.foreground#E2E8F0
input.placeholderForeground#9CA3AF
inputOption.activeBorder#A855F7
list.activeSelectionBackground#1D0B36
list.activeSelectionForeground#E2E8F0
list.focusBackground#1D0B36
list.focusForeground#E2E8F0
list.hoverBackground#140824
list.hoverForeground#E2E8F0
list.inactiveSelectionBackground#140824
list.inactiveSelectionForeground#E2E8F0
menu.background#140824
menu.border#7E22CE
menu.foreground#E2E8F0
menu.selectionBackground#9333EA
menu.selectionBorder#9333EA
menu.selectionForeground#FFFFFF
menubar.selectionBackground#1D0B36
menubar.selectionForeground#E2E8F0
notificationCenter.border#7E22CE
notificationCenterHeader.background#1A0B2E
notificationCenterHeader.foreground#E2E8F0
notificationLink.foreground#C084FC
notifications.background#140824
notifications.border#7E22CE
notifications.foreground#E2E8F0
notificationToast.border#7E22CE
panel.background#10061C
panel.border#311854
panelTitle.activeBorder#A855F7
panelTitle.activeForeground#E2E8F0
panelTitle.inactiveForeground#9CA3AF
peekView.border#A855F7
peekViewEditor.background#1A0B2E
peekViewResult.background#10061C
peekViewTitle.background#1A0B2E
quickInput.background#140824
quickInput.foreground#E2E8F0
quickInputList.focusBackground#1D0B36
quickInputTitle.background#1A0B2E
scrollbarSlider.activeBackground#6B499480
scrollbarSlider.background#31185480
scrollbarSlider.hoverBackground#4C248280
sideBar.background#1A0B2E
sideBar.foreground#CBD5E1
sideBarSectionHeader.background#10061C
sideBarSectionHeader.foreground#E2E8F0
sideBarTitle.foreground#E2E8F0
statusBar.background#1A0B2E
statusBar.debuggingBackground#A855F7
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#CBD5E1
statusBar.noFolderBackground#1A0B2E
statusBarItem.hoverBackground#1D0B36
tab.activeBackground#10061C
tab.activeBorderTop#A855F7
tab.activeForeground#E2E8F0
tab.border#1A0B2E
tab.inactiveBackground#1A0B2E
tab.inactiveForeground#9CA3AF
terminal.background#10061C
terminal.foreground#E2E8F0
titleBar.activeBackground#1A0B2E
titleBar.activeForeground#E2E8F0
titleBar.inactiveBackground#1A0B2E
titleBar.inactiveForeground#9CA3AF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9CA3AF	italic
string, punctuation.definition.string	#34D399	—
keyword, storage.type, storage.modifier	#A855F7	—
entity.name.function, meta.function-call, support.function	#C084FC	bold
variable, meta.definition.variable.name, support.variable	#E2E8F0	—
constant, variable.other.constant	#F59E0B	—
constant.numeric	#F472B6	—
keyword.operator	#D8B4FE	—
entity.name.type, entity.name.class, support.type, support.class	#8B5CF6	—

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