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 — Tanjiro (Hinokami Kagura)

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#0A0705
activityBar.foreground#FFEDD5
activityBar.inactiveForeground#9A3412
activityBarBadge.background#DC2626
activityBarBadge.foreground#FFFFFF
badge.background#DC2626
badge.foreground#FFFFFF
button.background#DC2626
button.foreground#FFFFFF
button.hoverBackground#B91C1C
dropdown.background#140B07
dropdown.border#EA580C
dropdown.foreground#FFEDD5
dropdown.listBackground#140B07
editor.background#0F0F0F
editor.findMatchBackground#DC262660
editor.findMatchHighlightBackground#DC262640
editor.foreground#FDBA74
editor.lineHighlightBackground#1F110B
editor.selectionBackground#EA580C40
editor.selectionHighlightBackground#EA580C30
editorBracketMatch.background#EA580C40
editorBracketMatch.border#EA580C
editorCursor.foreground#FBBF24
editorGroupHeader.tabsBackground#0A0705
editorLineNumber.activeForeground#FBBF24
editorLineNumber.foreground#7C2D12
editorSuggestWidget.background#140B07
editorSuggestWidget.border#EA580C
editorSuggestWidget.foreground#FFEDD5
editorSuggestWidget.highlightForeground#FBBF24
editorSuggestWidget.selectedBackground#2C170E
input.background#140B07
input.border#EA580C
input.foreground#FFEDD5
input.placeholderForeground#C2410C
inputOption.activeBorder#FBBF24
list.activeSelectionBackground#2C170E
list.activeSelectionForeground#FFFFFF
list.focusBackground#2C170E
list.focusForeground#FFFFFF
list.hoverBackground#140B07
list.hoverForeground#FFEDD5
list.inactiveSelectionBackground#140B07
list.inactiveSelectionForeground#FFEDD5
menu.background#140B07
menu.border#EA580C
menu.foreground#FFEDD5
menu.selectionBackground#EA580C
menu.selectionBorder#EA580C
menu.selectionForeground#FFFFFF
menubar.selectionBackground#2C170E
menubar.selectionForeground#FFFFFF
notificationCenter.border#EA580C
notificationCenterHeader.background#0A0705
notificationCenterHeader.foreground#FFEDD5
notificationLink.foreground#FBBF24
notifications.background#140B07
notifications.border#EA580C
notifications.foreground#FFEDD5
notificationToast.border#EA580C
panel.background#0F0F0F
panel.border#7C2D12
panelTitle.activeBorder#FBBF24
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#C2410C
peekView.border#FBBF24
peekViewEditor.background#0A0705
peekViewResult.background#0F0F0F
peekViewTitle.background#0A0705
quickInput.background#140B07
quickInput.foreground#FFEDD5
quickInputList.focusBackground#2C170E
quickInputTitle.background#0A0705
scrollbarSlider.activeBackground#EA580C80
scrollbarSlider.background#7C2D1280
scrollbarSlider.hoverBackground#9A341280
sideBar.background#0A0705
sideBar.foreground#FFEDD5
sideBarSectionHeader.background#0F0F0F
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#0A0705
statusBar.debuggingBackground#DC2626
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFEDD5
statusBar.noFolderBackground#0A0705
statusBarItem.hoverBackground#2C170E
tab.activeBackground#0F0F0F
tab.activeBorderTop#FBBF24
tab.activeForeground#FFFFFF
tab.border#0A0705
tab.inactiveBackground#0A0705
tab.inactiveForeground#9A3412
terminal.background#0F0F0F
terminal.foreground#FDBA74
titleBar.activeBackground#0A0705
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#0A0705
titleBar.inactiveForeground#9A3412

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7C2D12	italic
string, punctuation.definition.string	#FBBF24	—
keyword, storage.type, storage.modifier	#DC2626	—
entity.name.function, meta.function-call, support.function	#FB923C	bold
variable, meta.definition.variable.name, support.variable	#FFEDD5	—
constant, variable.other.constant	#F87171	—
constant.numeric	#FCA5A5	—
keyword.operator	#EA580C	—
entity.name.type, entity.name.class, support.type, support.class	#FED7AA	—

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