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 — Oshi no Ko (Ai's Eyes)

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#14141F
activityBar.foreground#F472B6
activityBar.inactiveForeground#6366F1
activityBarBadge.background#F472B6
activityBarBadge.foreground#000000
badge.background#F472B6
badge.foreground#000000
button.background#EC4899
button.foreground#FFFFFF
button.hoverBackground#DB2777
dropdown.background#1E1E2E
dropdown.border#F472B6
dropdown.foreground#F3E8FF
dropdown.listBackground#1E1E2E
editor.background#0F0F17
editor.findMatchBackground#FBBF2460
editor.findMatchHighlightBackground#FBBF2440
editor.foreground#F8FAFC
editor.lineHighlightBackground#1E1E2E
editor.selectionBackground#EC489940
editor.selectionHighlightBackground#38BDF830
editorBracketMatch.background#38BDF840
editorBracketMatch.border#38BDF8
editorCursor.foreground#FBBF24
editorGroupHeader.tabsBackground#14141F
editorLineNumber.activeForeground#38BDF8
editorLineNumber.foreground#4F46E5
editorSuggestWidget.background#1E1E2E
editorSuggestWidget.border#F472B6
editorSuggestWidget.foreground#F8FAFC
editorSuggestWidget.highlightForeground#FBBF24
editorSuggestWidget.selectedBackground#312E81
input.background#1E1E2E
input.border#38BDF8
input.foreground#F8FAFC
input.placeholderForeground#818CF8
inputOption.activeBorder#F472B6
list.activeSelectionBackground#312E81
list.activeSelectionForeground#FFFFFF
list.focusBackground#312E81
list.focusForeground#FFFFFF
list.hoverBackground#1E1E2E
list.hoverForeground#F8FAFC
list.inactiveSelectionBackground#1E1E2E
list.inactiveSelectionForeground#F8FAFC
menu.background#1E1E2E
menu.border#F472B6
menu.foreground#F8FAFC
menu.selectionBackground#EC4899
menu.selectionBorder#EC4899
menu.selectionForeground#FFFFFF
menubar.selectionBackground#312E81
menubar.selectionForeground#FFFFFF
notificationCenter.border#F472B6
notificationCenterHeader.background#14141F
notificationCenterHeader.foreground#F8FAFC
notificationLink.foreground#38BDF8
notifications.background#1E1E2E
notifications.border#F472B6
notifications.foreground#F8FAFC
notificationToast.border#38BDF8
panel.background#0F0F17
panel.border#312E81
panelTitle.activeBorder#FBBF24
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#818CF8
peekView.border#38BDF8
peekViewEditor.background#14141F
peekViewResult.background#0F0F17
peekViewTitle.background#14141F
quickInput.background#1E1E2E
quickInput.foreground#F8FAFC
quickInputList.focusBackground#312E81
quickInputTitle.background#14141F
scrollbarSlider.activeBackground#F472B680
scrollbarSlider.background#312E8180
scrollbarSlider.hoverBackground#4F46E580
sideBar.background#14141F
sideBar.foreground#F3E8FF
sideBarSectionHeader.background#0F0F17
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#14141F
statusBar.debuggingBackground#EC4899
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#F3E8FF
statusBar.noFolderBackground#14141F
statusBarItem.hoverBackground#312E81
tab.activeBackground#0F0F17
tab.activeBorderTop#FBBF24
tab.activeForeground#FFFFFF
tab.border#14141F
tab.inactiveBackground#14141F
tab.inactiveForeground#818CF8
terminal.background#0F0F17
terminal.foreground#F8FAFC
titleBar.activeBackground#14141F
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#14141F
titleBar.inactiveForeground#818CF8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#818CF8	italic
string, punctuation.definition.string	#38BDF8	—
keyword, storage.type, storage.modifier	#F472B6	—
entity.name.function, meta.function-call, support.function	#FBBF24	bold
variable, meta.definition.variable.name, support.variable	#F8FAFC	—
constant, variable.other.constant	#A78BFA	—
constant.numeric	#2DD4BF	—
keyword.operator	#F472B6	—
entity.name.type, entity.name.class, support.type, support.class	#F43F5E	—

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