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 — Roronoa Zoro (Asura)

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#011A13
activityBar.foreground#D1D5DB
activityBar.inactiveForeground#059669
activityBarBadge.background#10B981
activityBarBadge.foreground#000000
badge.background#10B981
badge.foreground#000000
button.background#059669
button.foreground#FFFFFF
button.hoverBackground#047857
dropdown.background#064E3B
dropdown.border#10B981
dropdown.foreground#F3F4F6
dropdown.listBackground#064E3B
editor.background#022C22
editor.findMatchBackground#4C1D9560
editor.findMatchHighlightBackground#4C1D9540
editor.foreground#E5E7EB
editor.lineHighlightBackground#064E3B
editor.selectionBackground#10B98130
editor.selectionHighlightBackground#34D39930
editorBracketMatch.background#10B98140
editorBracketMatch.border#34D399
editorCursor.foreground#34D399
editorGroupHeader.tabsBackground#011A13
editorLineNumber.activeForeground#34D399
editorLineNumber.foreground#047857
editorSuggestWidget.background#064E3B
editorSuggestWidget.border#10B981
editorSuggestWidget.foreground#F3F4F6
editorSuggestWidget.highlightForeground#34D399
editorSuggestWidget.selectedBackground#047857
input.background#064E3B
input.border#10B981
input.foreground#F3F4F6
input.placeholderForeground#34D399
inputOption.activeBorder#34D399
list.activeSelectionBackground#047857
list.activeSelectionForeground#FFFFFF
list.focusBackground#047857
list.focusForeground#FFFFFF
list.hoverBackground#064E3B
list.hoverForeground#F3F4F6
list.inactiveSelectionBackground#064E3B
list.inactiveSelectionForeground#F3F4F6
menu.background#064E3B
menu.border#10B981
menu.foreground#F3F4F6
menu.selectionBackground#10B981
menu.selectionBorder#10B981
menu.selectionForeground#000000
menubar.selectionBackground#047857
menubar.selectionForeground#FFFFFF
notificationCenter.border#10B981
notificationCenterHeader.background#011A13
notificationCenterHeader.foreground#F3F4F6
notificationLink.foreground#34D399
notifications.background#064E3B
notifications.border#10B981
notifications.foreground#F3F4F6
notificationToast.border#34D399
panel.background#022C22
panel.border#047857
panelTitle.activeBorder#34D399
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#9CA3AF
peekView.border#34D399
peekViewEditor.background#011A13
peekViewResult.background#022C22
peekViewTitle.background#011A13
quickInput.background#064E3B
quickInput.foreground#F3F4F6
quickInputList.focusBackground#047857
quickInputTitle.background#011A13
scrollbarSlider.activeBackground#34D39980
scrollbarSlider.background#04785780
scrollbarSlider.hoverBackground#10B98180
sideBar.background#011A13
sideBar.foreground#D1D5DB
sideBarSectionHeader.background#022C22
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#011A13
statusBar.debuggingBackground#059669
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#D1D5DB
statusBar.noFolderBackground#011A13
statusBarItem.hoverBackground#047857
tab.activeBackground#022C22
tab.activeBorderTop#34D399
tab.activeForeground#FFFFFF
tab.border#011A13
tab.inactiveBackground#011A13
tab.inactiveForeground#9CA3AF
terminal.background#022C22
terminal.foreground#E5E7EB
titleBar.activeBackground#011A13
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#011A13
titleBar.inactiveForeground#9CA3AF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9CA3AF	italic
string, punctuation.definition.string	#6EE7B7	—
keyword, storage.type, storage.modifier	#94A3B8	—
entity.name.function, meta.function-call, support.function	#34D399	bold
variable, meta.definition.variable.name, support.variable	#F3F4F6	—
constant, variable.other.constant	#8B5CF6	—
constant.numeric	#E2E8F0	—
keyword.operator	#A7F3D0	—
entity.name.type, entity.name.class, support.type, support.class	#F8FAFC	—

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