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 — Zero Two (Darling in the Franxx)

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#1A0510
activityBar.foreground#FCE7F3
activityBar.inactiveForeground#9D174D
activityBarBadge.background#F472B6
activityBarBadge.foreground#000000
badge.background#F472B6
badge.foreground#000000
button.background#EC4899
button.foreground#FFFFFF
button.hoverBackground#DB2777
dropdown.background#380D25
dropdown.border#EC4899
dropdown.foreground#FDF2F8
dropdown.listBackground#380D25
editor.background#2D0A1C
editor.findMatchBackground#BE185D60
editor.findMatchHighlightBackground#BE185D40
editor.foreground#FDF2F8
editor.lineHighlightBackground#4C1D3A
editor.selectionBackground#EC489950
editor.selectionHighlightBackground#F472B640
editorBracketMatch.background#EC489940
editorBracketMatch.border#F472B6
editorCursor.foreground#F472B6
editorGroupHeader.tabsBackground#1A0510
editorLineNumber.activeForeground#F472B6
editorLineNumber.foreground#831843
editorSuggestWidget.background#380D25
editorSuggestWidget.border#EC4899
editorSuggestWidget.foreground#FDF2F8
editorSuggestWidget.highlightForeground#FBCFE8
editorSuggestWidget.selectedBackground#621840
input.background#380D25
input.border#EC4899
input.foreground#FDF2F8
input.placeholderForeground#BE185D
inputOption.activeBorder#F472B6
list.activeSelectionBackground#621840
list.activeSelectionForeground#FFFFFF
list.focusBackground#621840
list.focusForeground#FFFFFF
list.hoverBackground#4C1D3A
list.hoverForeground#FDF2F8
list.inactiveSelectionBackground#4C1D3A
list.inactiveSelectionForeground#FDF2F8
menu.background#380D25
menu.border#EC4899
menu.foreground#FDF2F8
menu.selectionBackground#EC4899
menu.selectionBorder#EC4899
menu.selectionForeground#FFFFFF
menubar.selectionBackground#621840
menubar.selectionForeground#FFFFFF
notificationCenter.border#EC4899
notificationCenterHeader.background#1A0510
notificationCenterHeader.foreground#FDF2F8
notificationLink.foreground#F472B6
notifications.background#380D25
notifications.border#EC4899
notifications.foreground#FDF2F8
notificationToast.border#F472B6
panel.background#2D0A1C
panel.border#831843
panelTitle.activeBorder#F472B6
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#BE185D
peekView.border#F472B6
peekViewEditor.background#1A0510
peekViewResult.background#2D0A1C
peekViewTitle.background#1A0510
quickInput.background#380D25
quickInput.foreground#FDF2F8
quickInputList.focusBackground#621840
quickInputTitle.background#1A0510
scrollbarSlider.activeBackground#EC489980
scrollbarSlider.background#83184380
scrollbarSlider.hoverBackground#BE185D80
sideBar.background#1A0510
sideBar.foreground#FBCFE8
sideBarSectionHeader.background#2D0A1C
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#1A0510
statusBar.debuggingBackground#EC4899
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FBCFE8
statusBar.noFolderBackground#1A0510
statusBarItem.hoverBackground#621840
tab.activeBackground#2D0A1C
tab.activeBorderTop#F472B6
tab.activeForeground#FFFFFF
tab.border#1A0510
tab.inactiveBackground#1A0510
tab.inactiveForeground#BE185D
terminal.background#2D0A1C
terminal.foreground#FDF2F8
titleBar.activeBackground#1A0510
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#1A0510
titleBar.inactiveForeground#BE185D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#F9A8D4	italic
string, punctuation.definition.string	#FDA4AF	—
keyword, storage.type, storage.modifier	#EC4899	—
entity.name.function, meta.function-call, support.function	#F472B6	bold
variable, meta.definition.variable.name, support.variable	#FDF2F8	—
constant, variable.other.constant	#FBCFE8	—
constant.numeric	#BE185D	—
keyword.operator	#E11D48	—
entity.name.type, entity.name.class, support.type, support.class	#FCE7F3	—

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