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 — Rengoku (Flame Hashira)

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#140404
activityBar.foreground#FFEDD5
activityBar.inactiveForeground#991B1B
activityBarBadge.background#EF4444
activityBarBadge.foreground#FFFFFF
badge.background#EF4444
badge.foreground#FFFFFF
button.background#DC2626
button.foreground#FFFFFF
button.hoverBackground#B91C1C
dropdown.background#1A0505
dropdown.border#DC2626
dropdown.foreground#FFEDD5
dropdown.listBackground#1A0505
editor.background#0A0202
editor.findMatchBackground#F9731660
editor.findMatchHighlightBackground#F9731640
editor.foreground#FFF7ED
editor.lineHighlightBackground#290B0B
editor.selectionBackground#DC262640
editor.selectionHighlightBackground#DC262630
editorBracketMatch.background#DC262640
editorBracketMatch.border#DC2626
editorCursor.foreground#F97316
editorGroupHeader.tabsBackground#140404
editorLineNumber.activeForeground#F97316
editorLineNumber.foreground#7F1D1D
editorSuggestWidget.background#1A0505
editorSuggestWidget.border#DC2626
editorSuggestWidget.foreground#FFEDD5
editorSuggestWidget.highlightForeground#F97316
editorSuggestWidget.selectedBackground#450A0A
input.background#1A0505
input.border#DC2626
input.foreground#FFEDD5
input.placeholderForeground#991B1B
inputOption.activeBorder#F97316
list.activeSelectionBackground#450A0A
list.activeSelectionForeground#FFFFFF
list.focusBackground#450A0A
list.focusForeground#FFFFFF
list.hoverBackground#1A0505
list.hoverForeground#FFEDD5
list.inactiveSelectionBackground#1A0505
list.inactiveSelectionForeground#FFEDD5
menu.background#1A0505
menu.border#DC2626
menu.foreground#FFEDD5
menu.selectionBackground#DC2626
menu.selectionBorder#DC2626
menu.selectionForeground#FFFFFF
menubar.selectionBackground#450A0A
menubar.selectionForeground#FFFFFF
notificationCenter.border#DC2626
notificationCenterHeader.background#140404
notificationCenterHeader.foreground#FFEDD5
notificationLink.foreground#F97316
notifications.background#1A0505
notifications.border#DC2626
notifications.foreground#FFEDD5
notificationToast.border#DC2626
panel.background#0A0202
panel.border#7F1D1D
panelTitle.activeBorder#F97316
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#991B1B
peekView.border#F97316
peekViewEditor.background#140404
peekViewResult.background#0A0202
peekViewTitle.background#140404
quickInput.background#1A0505
quickInput.foreground#FFEDD5
quickInputList.focusBackground#450A0A
quickInputTitle.background#140404
scrollbarSlider.activeBackground#DC262680
scrollbarSlider.background#7F1D1D80
scrollbarSlider.hoverBackground#991B1B80
sideBar.background#140404
sideBar.foreground#FFEDD5
sideBarSectionHeader.background#0A0202
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#140404
statusBar.debuggingBackground#EF4444
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFEDD5
statusBar.noFolderBackground#140404
statusBarItem.hoverBackground#450A0A
tab.activeBackground#0A0202
tab.activeBorderTop#F97316
tab.activeForeground#FFFFFF
tab.border#140404
tab.inactiveBackground#140404
tab.inactiveForeground#991B1B
terminal.background#0A0202
terminal.foreground#FFF7ED
titleBar.activeBackground#140404
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#140404
titleBar.inactiveForeground#991B1B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7F1D1D	italic
string, punctuation.definition.string	#FBBF24	—
keyword, storage.type, storage.modifier	#EF4444	—
entity.name.function, meta.function-call, support.function	#FB923C	bold
variable, meta.definition.variable.name, support.variable	#FFF7ED	—
constant, variable.other.constant	#FCA5A5	—
constant.numeric	#FCD34D	—
keyword.operator	#F97316	—
entity.name.type, entity.name.class, support.type, support.class	#FFEDD5	—

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