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 — Sakura Healing 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#191114
activityBar.foreground#FCE4EC
activityBar.inactiveForeground#F48FB1
activityBarBadge.background#FF4081
activityBarBadge.foreground#FFFFFF
badge.background#FF4081
badge.foreground#FFFFFF
button.background#FF4081
button.foreground#FFFFFF
button.hoverBackground#F50057
dropdown.background#24161C
dropdown.border#FF4081
dropdown.foreground#FCE4EC
dropdown.listBackground#24161C
editor.background#140D10
editor.findMatchBackground#F0629260
editor.findMatchHighlightBackground#F0629240
editor.foreground#F8BBD0
editor.lineHighlightBackground#2A1820
editor.selectionBackground#FF408140
editor.selectionHighlightBackground#FF408130
editorBracketMatch.background#FF408140
editorBracketMatch.border#FF4081
editorCursor.foreground#FF4081
editorGroupHeader.tabsBackground#191114
editorLineNumber.activeForeground#F48FB1
editorLineNumber.foreground#D81B60
editorSuggestWidget.background#24161C
editorSuggestWidget.border#FF4081
editorSuggestWidget.foreground#FCE4EC
editorSuggestWidget.highlightForeground#FF4081
editorSuggestWidget.selectedBackground#3D202D
input.background#24161C
input.border#FF4081
input.foreground#FCE4EC
input.placeholderForeground#F48FB1
inputOption.activeBorder#FF4081
list.activeSelectionBackground#3D202D
list.activeSelectionForeground#FFFFFF
list.focusBackground#3D202D
list.focusForeground#FFFFFF
list.hoverBackground#24161C
list.hoverForeground#FCE4EC
list.inactiveSelectionBackground#24161C
list.inactiveSelectionForeground#FCE4EC
menu.background#24161C
menu.border#FF4081
menu.foreground#FCE4EC
menu.selectionBackground#FF4081
menu.selectionBorder#FF4081
menu.selectionForeground#FFFFFF
menubar.selectionBackground#3D202D
menubar.selectionForeground#FFFFFF
notificationCenter.border#FF4081
notificationCenterHeader.background#191114
notificationCenterHeader.foreground#FCE4EC
notificationLink.foreground#F48FB1
notifications.background#24161C
notifications.border#FF4081
notifications.foreground#FCE4EC
notificationToast.border#FF4081
panel.background#140D10
panel.border#D81B60
panelTitle.activeBorder#FF4081
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#F48FB1
peekView.border#FF4081
peekViewEditor.background#191114
peekViewResult.background#140D10
peekViewTitle.background#191114
quickInput.background#24161C
quickInput.foreground#FCE4EC
quickInputList.focusBackground#3D202D
quickInputTitle.background#191114
scrollbarSlider.activeBackground#FF408180
scrollbarSlider.background#D81B6080
scrollbarSlider.hoverBackground#F5005780
sideBar.background#191114
sideBar.foreground#FCE4EC
sideBarSectionHeader.background#140D10
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#191114
statusBar.debuggingBackground#FF4081
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FCE4EC
statusBar.noFolderBackground#191114
statusBarItem.hoverBackground#3D202D
tab.activeBackground#140D10
tab.activeBorderTop#FF4081
tab.activeForeground#FFFFFF
tab.border#191114
tab.inactiveBackground#191114
tab.inactiveForeground#F48FB1
terminal.background#140D10
terminal.foreground#F8BBD0
titleBar.activeBackground#191114
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#191114
titleBar.inactiveForeground#F48FB1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#F48FB1	italic
string, punctuation.definition.string	#A5D6A7	—
keyword, storage.type, storage.modifier	#FF4081	—
entity.name.function, meta.function-call, support.function	#F06292	bold
variable, meta.definition.variable.name, support.variable	#F8BBD0	—
constant, variable.other.constant	#81C784	—
constant.numeric	#BA68C8	—
keyword.operator	#FF4081	—
entity.name.type, entity.name.class, support.type, support.class	#FCE4EC	—

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