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 — Gilgamesh (Gate of Babylon)

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#000000
activityBar.foreground#D4AF37
activityBar.inactiveForeground#5E4A10
activityBarBadge.background#B8860B
activityBarBadge.foreground#000000
badge.background#B8860B
badge.foreground#000000
button.background#D4AF37
button.foreground#000000
button.hoverBackground#B8860B
dropdown.background#0A0A0A
dropdown.border#D4AF37
dropdown.foreground#F5E6C4
dropdown.listBackground#0A0A0A
editor.background#050505
editor.findMatchBackground#EF444460
editor.findMatchHighlightBackground#EF444440
editor.foreground#EDE8D8
editor.lineHighlightBackground#111111
editor.selectionBackground#D4AF3740
editor.selectionHighlightBackground#B8860B30
editorBracketMatch.background#D4AF3740
editorBracketMatch.border#D4AF37
editorCursor.foreground#D4AF37
editorGroupHeader.tabsBackground#000000
editorLineNumber.activeForeground#D4AF37
editorLineNumber.foreground#5E4A10
editorSuggestWidget.background#0A0A0A
editorSuggestWidget.border#D4AF37
editorSuggestWidget.foreground#EDE8D8
editorSuggestWidget.highlightForeground#FCD34D
editorSuggestWidget.selectedBackground#1A1608
input.background#0A0A0A
input.border#D4AF37
input.foreground#EDE8D8
input.placeholderForeground#8B7322
inputOption.activeBorder#FCD34D
list.activeSelectionBackground#1A1608
list.activeSelectionForeground#FFFFFF
list.focusBackground#1A1608
list.focusForeground#FFFFFF
list.hoverBackground#111111
list.hoverForeground#EDE8D8
list.inactiveSelectionBackground#111111
list.inactiveSelectionForeground#EDE8D8
menu.background#0A0A0A
menu.border#D4AF37
menu.foreground#EDE8D8
menu.selectionBackground#D4AF37
menu.selectionBorder#D4AF37
menu.selectionForeground#000000
menubar.selectionBackground#1A1608
menubar.selectionForeground#FFFFFF
notificationCenter.border#D4AF37
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#EDE8D8
notificationLink.foreground#FCD34D
notifications.background#0A0A0A
notifications.border#D4AF37
notifications.foreground#EDE8D8
notificationToast.border#FCD34D
panel.background#050505
panel.border#5E4A10
panelTitle.activeBorder#D4AF37
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#8B7322
peekView.border#D4AF37
peekViewEditor.background#000000
peekViewResult.background#050505
peekViewTitle.background#000000
quickInput.background#0A0A0A
quickInput.foreground#EDE8D8
quickInputList.focusBackground#1A1608
quickInputTitle.background#000000
scrollbarSlider.activeBackground#D4AF3780
scrollbarSlider.background#5E4A1080
scrollbarSlider.hoverBackground#8B732280
sideBar.background#000000
sideBar.foreground#EDE8D8
sideBarSectionHeader.background#050505
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#000000
statusBar.debuggingBackground#B8860B
statusBar.debuggingForeground#000000
statusBar.foreground#EDE8D8
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#1A1608
tab.activeBackground#050505
tab.activeBorderTop#D4AF37
tab.activeForeground#FFFFFF
tab.border#000000
tab.inactiveBackground#000000
tab.inactiveForeground#8B7322
terminal.background#050505
terminal.foreground#EDE8D8
titleBar.activeBackground#000000
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#8B7322

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8B7322	italic
string, punctuation.definition.string	#FCD34D	—
keyword, storage.type, storage.modifier	#D4AF37	—
entity.name.function, meta.function-call, support.function	#FDE047	bold
variable, meta.definition.variable.name, support.variable	#EDE8D8	—
constant, variable.other.constant	#EF4444	—
constant.numeric	#FCA5A5	—
keyword.operator	#D4AF37	—
entity.name.type, entity.name.class, support.type, support.class	#FEF3C7	—

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