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 — Light Yagami (Kira)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#F8FAFC
activityBar.foreground#450A0A
activityBar.inactiveForeground#94A3B8
activityBarBadge.background#DC2626
activityBarBadge.foreground#FFFFFF
badge.background#DC2626
badge.foreground#FFFFFF
button.background#000000
button.foreground#FFFFFF
button.hoverBackground#171717
dropdown.background#FFFFFF
dropdown.border#E2E8F0
dropdown.foreground#000000
dropdown.listBackground#FFFFFF
editor.background#FFFFFF
editor.findMatchBackground#EF444460
editor.findMatchHighlightBackground#F8717140
editor.foreground#000000
editor.lineHighlightBackground#F1F5F9
editor.selectionBackground#FCA5A5
editor.selectionHighlightBackground#FECACA
editorBracketMatch.background#FECACA
editorBracketMatch.border#DC2626
editorCursor.foreground#DC2626
editorGroupHeader.tabsBackground#F8FAFC
editorLineNumber.activeForeground#450A0A
editorLineNumber.foreground#CBD5E1
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#E2E8F0
editorSuggestWidget.foreground#000000
editorSuggestWidget.highlightForeground#DC2626
editorSuggestWidget.selectedBackground#F1F5F9
input.background#FFFFFF
input.border#E2E8F0
input.foreground#000000
input.placeholderForeground#94A3B8
inputOption.activeBorder#DC2626
list.activeSelectionBackground#F1F5F9
list.activeSelectionForeground#000000
list.focusBackground#F1F5F9
list.focusForeground#000000
list.hoverBackground#F8FAFC
list.hoverForeground#000000
list.inactiveSelectionBackground#F8FAFC
list.inactiveSelectionForeground#000000
menu.background#FFFFFF
menu.border#E2E8F0
menu.foreground#000000
menu.selectionBackground#000000
menu.selectionBorder#000000
menu.selectionForeground#FFFFFF
menubar.selectionBackground#F1F5F9
menubar.selectionForeground#000000
notificationCenter.border#E2E8F0
notificationCenterHeader.background#F8FAFC
notificationCenterHeader.foreground#000000
notificationLink.foreground#DC2626
notifications.background#FFFFFF
notifications.border#E2E8F0
notifications.foreground#000000
notificationToast.border#E2E8F0
panel.background#FFFFFF
panel.border#E2E8F0
panelTitle.activeBorder#DC2626
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#64748B
peekView.border#DC2626
peekViewEditor.background#F8FAFC
peekViewResult.background#FFFFFF
peekViewTitle.background#F8FAFC
quickInput.background#FFFFFF
quickInput.foreground#000000
quickInputList.focusBackground#F1F5F9
quickInputTitle.background#F8FAFC
scrollbarSlider.activeBackground#450A0A80
scrollbarSlider.background#E2E8F080
scrollbarSlider.hoverBackground#CBD5E180
sideBar.background#F8FAFC
sideBar.foreground#1E293B
sideBarSectionHeader.background#F1F5F9
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000
statusBar.background#F8FAFC
statusBar.debuggingBackground#DC2626
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#1E293B
statusBar.noFolderBackground#F8FAFC
statusBarItem.hoverBackground#F1F5F9
tab.activeBackground#FFFFFF
tab.activeBorderTop#DC2626
tab.activeForeground#000000
tab.border#F8FAFC
tab.inactiveBackground#F8FAFC
tab.inactiveForeground#64748B
terminal.background#FFFFFF
terminal.foreground#000000
titleBar.activeBackground#F8FAFC
titleBar.activeForeground#000000
titleBar.inactiveBackground#F8FAFC
titleBar.inactiveForeground#64748B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#94A3B8	italic
string, punctuation.definition.string	#000000	—
keyword, storage.type, storage.modifier	#DC2626	—
entity.name.function, meta.function-call, support.function	#450A0A	bold
variable, meta.definition.variable.name, support.variable	#171717	—
constant, variable.other.constant	#450A0A	—
constant.numeric	#B91C1C	—
keyword.operator	#DC2626	—
entity.name.type, entity.name.class, support.type, support.class	#7F1D1D	—

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