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

Zoro (Three Sword Style)

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Anime Theme Collection — Zoro (Three Sword Style)

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#050F08
activityBar.foreground#D4D4D8
activityBar.inactiveForeground#166534
activityBarBadge.background#10B981
activityBarBadge.foreground#000000
badge.background#10B981
badge.foreground#000000
button.background#166534
button.foreground#FFFFFF
button.hoverBackground#14532D
dropdown.background#0A1C12
dropdown.border#166534
dropdown.foreground#F0FDF4
dropdown.listBackground#0A1C12
editor.background#1C1917
editor.findMatchBackground#FBBF2460
editor.findMatchHighlightBackground#FBBF2440
editor.foreground#E2E8F0
editor.lineHighlightBackground#292524
editor.selectionBackground#16653440
editor.selectionHighlightBackground#16653430
editorBracketMatch.background#16653440
editorBracketMatch.border#166534
editorCursor.foreground#10B981
editorGroupHeader.tabsBackground#050F08
editorLineNumber.activeForeground#10B981
editorLineNumber.foreground#44403C
editorSuggestWidget.background#0A1C12
editorSuggestWidget.border#166534
editorSuggestWidget.foreground#F0FDF4
editorSuggestWidget.highlightForeground#FBBF24
editorSuggestWidget.selectedBackground#14532D
input.background#0A1C12
input.border#166534
input.foreground#F0FDF4
input.placeholderForeground#14532D
inputOption.activeBorder#FBBF24
list.activeSelectionBackground#14532D
list.activeSelectionForeground#FFFFFF
list.focusBackground#14532D
list.focusForeground#FFFFFF
list.hoverBackground#0A1C12
list.hoverForeground#F0FDF4
list.inactiveSelectionBackground#0A1C12
list.inactiveSelectionForeground#F0FDF4
menu.background#0A1C12
menu.border#166534
menu.foreground#F0FDF4
menu.selectionBackground#166534
menu.selectionBorder#166534
menu.selectionForeground#FFFFFF
menubar.selectionBackground#14532D
menubar.selectionForeground#FFFFFF
notificationCenter.border#166534
notificationCenterHeader.background#050F08
notificationCenterHeader.foreground#F0FDF4
notificationLink.foreground#10B981
notifications.background#0A1C12
notifications.border#166534
notifications.foreground#F0FDF4
notificationToast.border#166534
panel.background#1C1917
panel.border#292524
panelTitle.activeBorder#10B981
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#44403C
peekView.border#166534
peekViewEditor.background#050F08
peekViewResult.background#1C1917
peekViewTitle.background#050F08
quickInput.background#0A1C12
quickInput.foreground#F0FDF4
quickInputList.focusBackground#14532D
quickInputTitle.background#050F08
scrollbarSlider.activeBackground#16653480
scrollbarSlider.background#29252480
scrollbarSlider.hoverBackground#44403C80
sideBar.background#050F08
sideBar.foreground#D4D4D8
sideBarSectionHeader.background#1C1917
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#050F08
statusBar.debuggingBackground#10B981
statusBar.debuggingForeground#000000
statusBar.foreground#D4D4D8
statusBar.noFolderBackground#050F08
statusBarItem.hoverBackground#14532D
tab.activeBackground#1C1917
tab.activeBorderTop#10B981
tab.activeForeground#FFFFFF
tab.border#050F08
tab.inactiveBackground#050F08
tab.inactiveForeground#78716C
terminal.background#1C1917
terminal.foreground#E2E8F0
titleBar.activeBackground#050F08
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#050F08
titleBar.inactiveForeground#78716C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#78716C	italic
string, punctuation.definition.string	#FBBF24	—
keyword, storage.type, storage.modifier	#10B981	—
entity.name.function, meta.function-call, support.function	#34D399	bold
variable, meta.definition.variable.name, support.variable	#E2E8F0	—
constant, variable.other.constant	#F43F5E	—
constant.numeric	#D4D4D8	—
keyword.operator	#16A34A	—
entity.name.type, entity.name.class, support.type, support.class	#A7F3D0	—

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