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 Cursed Pink (Cherry Blossom)

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#120910
activityBar.foreground#94A3B8
activityBar.inactiveForeground#64748B
activityBarBadge.background#EC4899
activityBarBadge.foreground#111827
badge.background#EC4899
badge.foreground#111827
button.background#EC4899
button.foreground#111827
button.hoverBackground#DB2777
dropdown.background#170A14
dropdown.border#EC4899
dropdown.foreground#94A3B8
dropdown.listBackground#170A14
editor.background#0D050C
editor.findMatchBackground#F472B660
editor.findMatchHighlightBackground#F472B640
editor.foreground#94A3B8
editor.lineHighlightBackground#1D0C19
editor.selectionBackground#EC489940
editor.selectionHighlightBackground#EC489930
editorBracketMatch.background#EC489940
editorBracketMatch.border#EC4899
editorCursor.foreground#EC4899
editorGroupHeader.tabsBackground#120910
editorLineNumber.activeForeground#FBCFE8
editorLineNumber.foreground#831843
editorSuggestWidget.background#170A14
editorSuggestWidget.border#EC4899
editorSuggestWidget.foreground#94A3B8
editorSuggestWidget.highlightForeground#EC4899
editorSuggestWidget.selectedBackground#1D0C19
input.background#170A14
input.border#EC4899
input.foreground#94A3B8
input.placeholderForeground#9CA3AF
inputOption.activeBorder#EC4899
list.activeSelectionBackground#1D0C19
list.activeSelectionForeground#94A3B8
list.focusBackground#1D0C19
list.focusForeground#94A3B8
list.hoverBackground#170A14
list.hoverForeground#94A3B8
list.inactiveSelectionBackground#170A14
list.inactiveSelectionForeground#94A3B8
menu.background#170A14
menu.border#EC4899
menu.foreground#94A3B8
menu.selectionBackground#EC4899
menu.selectionBorder#EC4899
menu.selectionForeground#111827
menubar.selectionBackground#1D0C19
menubar.selectionForeground#94A3B8
notificationCenter.border#EC4899
notificationCenterHeader.background#120910
notificationCenterHeader.foreground#94A3B8
notificationLink.foreground#F472B6
notifications.background#170A14
notifications.border#EC4899
notifications.foreground#94A3B8
notificationToast.border#EC4899
panel.background#0D050C
panel.border#4C1D95
panelTitle.activeBorder#EC4899
panelTitle.activeForeground#94A3B8
panelTitle.inactiveForeground#9CA3AF
peekView.border#EC4899
peekViewEditor.background#120910
peekViewResult.background#0D050C
peekViewTitle.background#120910
quickInput.background#170A14
quickInput.foreground#94A3B8
quickInputList.focusBackground#1D0C19
quickInputTitle.background#120910
scrollbarSlider.activeBackground#6B499480
scrollbarSlider.background#31185480
scrollbarSlider.hoverBackground#4C248280
sideBar.background#120910
sideBar.foreground#CBD5E1
sideBarSectionHeader.background#0D050C
sideBarSectionHeader.foreground#94A3B8
sideBarTitle.foreground#94A3B8
statusBar.background#120910
statusBar.debuggingBackground#EC4899
statusBar.debuggingForeground#111827
statusBar.foreground#CBD5E1
statusBar.noFolderBackground#120910
statusBarItem.hoverBackground#1D0C19
tab.activeBackground#0D050C
tab.activeBorderTop#EC4899
tab.activeForeground#94A3B8
tab.border#120910
tab.inactiveBackground#120910
tab.inactiveForeground#9CA3AF
terminal.background#0D050C
terminal.foreground#94A3B8
titleBar.activeBackground#120910
titleBar.activeForeground#94A3B8
titleBar.inactiveBackground#120910
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	#F9A8D4	—
keyword, storage.type, storage.modifier	#EC4899	—
entity.name.function, meta.function-call, support.function	#F472B6	bold
variable, meta.definition.variable.name, support.variable	#94A3B8	—
constant, variable.other.constant	#FBCFE8	—
constant.numeric	#BE185D	—
keyword.operator	#DB2777	—
entity.name.type, entity.name.class, support.type, support.class	#FDBA74	—

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