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 — Sukuna (King of Curses)

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#1A0000
activityBar.foreground#F3F4F6
activityBar.inactiveForeground#991B1B
activityBarBadge.background#DC2626
activityBarBadge.foreground#FFFFFF
badge.background#DC2626
badge.foreground#FFFFFF
button.background#991B1B
button.foreground#FFFFFF
button.hoverBackground#7F1D1D
dropdown.background#2D0202
dropdown.border#991B1B
dropdown.foreground#F9FAFB
dropdown.listBackground#2D0202
editor.background#0F0000
editor.findMatchBackground#DC262660
editor.findMatchHighlightBackground#DC262640
editor.foreground#FEF2F2
editor.lineHighlightBackground#290404
editor.selectionBackground#991B1B40
editor.selectionHighlightBackground#991B1B30
editorBracketMatch.background#991B1B40
editorBracketMatch.border#DC2626
editorCursor.foreground#DC2626
editorGroupHeader.tabsBackground#1A0000
editorLineNumber.activeForeground#FCA5A5
editorLineNumber.foreground#7F1D1D
editorSuggestWidget.background#2D0202
editorSuggestWidget.border#991B1B
editorSuggestWidget.foreground#F9FAFB
editorSuggestWidget.highlightForeground#DC2626
editorSuggestWidget.selectedBackground#450A0A
input.background#2D0202
input.border#991B1B
input.foreground#F9FAFB
input.placeholderForeground#B91C1C
inputOption.activeBorder#DC2626
list.activeSelectionBackground#450A0A
list.activeSelectionForeground#FFFFFF
list.focusBackground#450A0A
list.focusForeground#FFFFFF
list.hoverBackground#2D0202
list.hoverForeground#F3F4F6
list.inactiveSelectionBackground#2D0202
list.inactiveSelectionForeground#F3F4F6
menu.background#2D0202
menu.border#991B1B
menu.foreground#F9FAFB
menu.selectionBackground#991B1B
menu.selectionBorder#991B1B
menu.selectionForeground#FFFFFF
menubar.selectionBackground#450A0A
menubar.selectionForeground#FFFFFF
notificationCenter.border#991B1B
notificationCenterHeader.background#1A0000
notificationCenterHeader.foreground#F3F4F6
notificationLink.foreground#FCA5A5
notifications.background#2D0202
notifications.border#991B1B
notifications.foreground#F3F4F6
notificationToast.border#991B1B
panel.background#0F0000
panel.border#7F1D1D
panelTitle.activeBorder#DC2626
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#991B1B
peekView.border#DC2626
peekViewEditor.background#1A0000
peekViewResult.background#0F0000
peekViewTitle.background#1A0000
quickInput.background#2D0202
quickInput.foreground#F3F4F6
quickInputList.focusBackground#450A0A
quickInputTitle.background#1A0000
scrollbarSlider.activeBackground#B91C1C80
scrollbarSlider.background#7F1D1D80
scrollbarSlider.hoverBackground#991B1B80
sideBar.background#1A0000
sideBar.foreground#F3F4F6
sideBarSectionHeader.background#0F0000
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#1A0000
statusBar.debuggingBackground#DC2626
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#F3F4F6
statusBar.noFolderBackground#1A0000
statusBarItem.hoverBackground#450A0A
tab.activeBackground#0F0000
tab.activeBorderTop#DC2626
tab.activeForeground#FFFFFF
tab.border#1A0000
tab.inactiveBackground#1A0000
tab.inactiveForeground#991B1B
terminal.background#0F0000
terminal.foreground#FEF2F2
titleBar.activeBackground#1A0000
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#1A0000
titleBar.inactiveForeground#991B1B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#991B1B	italic
string, punctuation.definition.string	#E5E7EB	—
keyword, storage.type, storage.modifier	#DC2626	—
entity.name.function, meta.function-call, support.function	#FCA5A5	bold
variable, meta.definition.variable.name, support.variable	#FEF2F2	—
constant, variable.other.constant	#F87171	—
constant.numeric	#EF4444	—
keyword.operator	#DC2626	—
entity.name.type, entity.name.class, support.type, support.class	#F3F4F6	—

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