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 Red Reversal

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#1A1010
activityBar.foreground#E2E8F0
activityBar.inactiveForeground#64748B
activityBarBadge.background#F87171
activityBarBadge.foreground#E2E8F0
badge.background#F87171
badge.foreground#E2E8F0
button.background#F87171
button.foreground#E2E8F0
button.hoverBackground#DC2626
dropdown.background#221515
dropdown.border#F87171
dropdown.foreground#E2E8F0
dropdown.listBackground#221515
editor.background#181010
editor.findMatchBackground#F59E0B60
editor.findMatchHighlightBackground#F59E0B40
editor.foreground#E2E8F0
editor.lineHighlightBackground#2A1313
editor.selectionBackground#F8717140
editor.selectionHighlightBackground#F8717130
editorBracketMatch.background#F8717140
editorBracketMatch.border#F87171
editorCursor.foreground#F87171
editorGroupHeader.tabsBackground#1A1010
editorLineNumber.activeForeground#FCA5A5
editorLineNumber.foreground#7F1D1D
editorSuggestWidget.background#221515
editorSuggestWidget.border#F87171
editorSuggestWidget.foreground#E2E8F0
editorSuggestWidget.highlightForeground#F87171
editorSuggestWidget.selectedBackground#2A1313
input.background#221515
input.border#F87171
input.foreground#E2E8F0
input.placeholderForeground#9CA3AF
inputOption.activeBorder#F87171
list.activeSelectionBackground#2A1313
list.activeSelectionForeground#E2E8F0
list.focusBackground#2A1313
list.focusForeground#E2E8F0
list.hoverBackground#221515
list.hoverForeground#E2E8F0
list.inactiveSelectionBackground#221515
list.inactiveSelectionForeground#E2E8F0
menu.background#221515
menu.border#F87171
menu.foreground#E2E8F0
menu.selectionBackground#F87171
menu.selectionBorder#F87171
menu.selectionForeground#E2E8F0
menubar.selectionBackground#2A1313
menubar.selectionForeground#E2E8F0
notificationCenter.border#F87171
notificationCenterHeader.background#1A1010
notificationCenterHeader.foreground#E2E8F0
notificationLink.foreground#FCA5A5
notifications.background#221515
notifications.border#F87171
notifications.foreground#E2E8F0
notificationToast.border#F87171
panel.background#181010
panel.border#3F1D1D
panelTitle.activeBorder#F87171
panelTitle.activeForeground#E2E8F0
panelTitle.inactiveForeground#9CA3AF
peekView.border#F87171
peekViewEditor.background#1A1010
peekViewResult.background#181010
peekViewTitle.background#1A1010
quickInput.background#221515
quickInput.foreground#E2E8F0
quickInputList.focusBackground#2A1313
quickInputTitle.background#1A1010
sideBar.background#1A1010
sideBar.foreground#CBD5E1
sideBarSectionHeader.background#181010
sideBarSectionHeader.foreground#E2E8F0
sideBarTitle.foreground#E2E8F0
statusBar.background#1A1010
statusBar.debuggingBackground#F87171
statusBar.debuggingForeground#E2E8F0
statusBar.foreground#CBD5E1
statusBar.noFolderBackground#1A1010
statusBarItem.hoverBackground#2A1313
tab.activeBackground#181010
tab.activeBorderTop#F87171
tab.activeForeground#E2E8F0
tab.border#1A1010
tab.inactiveBackground#1A1010
tab.inactiveForeground#9CA3AF
terminal.background#181010
terminal.foreground#E2E8F0
titleBar.activeBackground#1A1010
titleBar.activeForeground#E2E8F0
titleBar.inactiveBackground#1A1010
titleBar.inactiveForeground#9CA3AF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7F1D1D	italic
string, punctuation.definition.string	#FDA4AF	—
keyword, storage.type, storage.modifier	#F87171	—
entity.name.function, meta.function-call, support.function	#FCA5A5	bold
variable, meta.definition.variable.name, support.variable	#E2E8F0	—
constant, variable.other.constant	#F59E0B	—
constant.numeric	#FB923C	—
keyword.operator	#F87171	—
entity.name.type, entity.name.class, support.type, support.class	#FECDD3	—

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