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 — 5 Centimeters per Second (Sakura Drop)

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#0F1626
activityBar.foreground#E0E7FF
activityBar.inactiveForeground#312E81
activityBarBadge.background#F472B6
activityBarBadge.foreground#FFFFFF
badge.background#F472B6
badge.foreground#FFFFFF
button.background#F472B6
button.foreground#FFFFFF
button.hoverBackground#DB2777
dropdown.background#1E1B4B
dropdown.border#F472B6
dropdown.foreground#E0E7FF
dropdown.listBackground#1E1B4B
editor.background#0B101E
editor.findMatchBackground#60A5FA60
editor.findMatchHighlightBackground#60A5FA40
editor.foreground#F8FAFC
editor.lineHighlightBackground#171032
editor.selectionBackground#F472B640
editor.selectionHighlightBackground#F472B630
editorBracketMatch.background#F472B640
editorBracketMatch.border#60A5FA
editorCursor.foreground#60A5FA
editorGroupHeader.tabsBackground#0F1626
editorLineNumber.activeForeground#E0E7FF
editorLineNumber.foreground#475569
editorSuggestWidget.background#1E1B4B
editorSuggestWidget.border#F472B6
editorSuggestWidget.foreground#E0E7FF
editorSuggestWidget.highlightForeground#FBCFE8
editorSuggestWidget.selectedBackground#312E81
input.background#1E1B4B
input.border#F472B6
input.foreground#E0E7FF
input.placeholderForeground#64748B
inputOption.activeBorder#FBCFE8
list.activeSelectionBackground#312E81
list.activeSelectionForeground#FFFFFF
list.focusBackground#312E81
list.focusForeground#FFFFFF
list.hoverBackground#171032
list.hoverForeground#E0E7FF
list.inactiveSelectionBackground#171032
list.inactiveSelectionForeground#E0E7FF
menu.background#1E1B4B
menu.border#F472B6
menu.foreground#E0E7FF
menu.selectionBackground#F472B6
menu.selectionBorder#F472B6
menu.selectionForeground#FFFFFF
menubar.selectionBackground#312E81
menubar.selectionForeground#FFFFFF
notificationCenter.border#F472B6
notificationCenterHeader.background#0F1626
notificationCenterHeader.foreground#E0E7FF
notificationLink.foreground#60A5FA
notifications.background#1E1B4B
notifications.border#F472B6
notifications.foreground#E0E7FF
notificationToast.border#F472B6
panel.background#0B101E
panel.border#312E81
panelTitle.activeBorder#FBCFE8
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#64748B
peekView.border#FBCFE8
peekViewEditor.background#0F1626
peekViewResult.background#0B101E
peekViewTitle.background#0F1626
quickInput.background#1E1B4B
quickInput.foreground#E0E7FF
quickInputList.focusBackground#312E81
quickInputTitle.background#0F1626
scrollbarSlider.activeBackground#F472B680
scrollbarSlider.background#312E8180
scrollbarSlider.hoverBackground#4338CA80
sideBar.background#0F1626
sideBar.foreground#E0E7FF
sideBarSectionHeader.background#0B101E
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#0F1626
statusBar.debuggingBackground#F472B6
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#E0E7FF
statusBar.noFolderBackground#0F1626
statusBarItem.hoverBackground#312E81
tab.activeBackground#0B101E
tab.activeBorderTop#FBCFE8
tab.activeForeground#FFFFFF
tab.border#0F1626
tab.inactiveBackground#0F1626
tab.inactiveForeground#64748B
terminal.background#0B101E
terminal.foreground#F8FAFC
titleBar.activeBackground#0F1626
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#0F1626
titleBar.inactiveForeground#64748B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4F46E5	italic
string, punctuation.definition.string	#93C5FD	—
keyword, storage.type, storage.modifier	#F472B6	—
entity.name.function, meta.function-call, support.function	#FDA4AF	bold
variable, meta.definition.variable.name, support.variable	#F8FAFC	—
constant, variable.other.constant	#A78BFA	—
constant.numeric	#FDE047	—
keyword.operator	#A7F3D0	—
entity.name.type, entity.name.class, support.type, support.class	#FBCFE8	—

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