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 — Naruto Nine Tails

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#140D08
activityBar.foreground#FFE0A8
activityBar.inactiveForeground#9C5E2D
activityBarBadge.background#FF7300
activityBarBadge.foreground#FFFFFF
badge.background#FF7300
badge.foreground#FFFFFF
button.background#FF7300
button.foreground#FFFFFF
button.hoverBackground#E05A00
dropdown.background#1C120B
dropdown.border#FF7300
dropdown.foreground#FFE0A8
dropdown.listBackground#1C120B
editor.background#120B06
editor.findMatchBackground#FFB34760
editor.findMatchHighlightBackground#FFB34740
editor.foreground#FDEAD2
editor.lineHighlightBackground#1F140D
editor.selectionBackground#FF730040
editor.selectionHighlightBackground#FF730030
editorBracketMatch.background#FF730040
editorBracketMatch.border#FF7300
editorCursor.foreground#FF7300
editorGroupHeader.tabsBackground#140D08
editorLineNumber.activeForeground#FFB347
editorLineNumber.foreground#783B13
editorSuggestWidget.background#1C120B
editorSuggestWidget.border#FF7300
editorSuggestWidget.foreground#FFE0A8
editorSuggestWidget.highlightForeground#FF7300
editorSuggestWidget.selectedBackground#301D11
input.background#1C120B
input.border#FF7300
input.foreground#FFE0A8
input.placeholderForeground#9C5E2D
inputOption.activeBorder#FF7300
list.activeSelectionBackground#301D11
list.activeSelectionForeground#FFF1DF
list.focusBackground#301D11
list.focusForeground#FFF1DF
list.hoverBackground#1C120B
list.hoverForeground#FFE0A8
list.inactiveSelectionBackground#1C120B
list.inactiveSelectionForeground#FFE0A8
menu.background#1C120B
menu.border#FF7300
menu.foreground#FFE0A8
menu.selectionBackground#FF7300
menu.selectionBorder#FF7300
menu.selectionForeground#FFFFFF
menubar.selectionBackground#301D11
menubar.selectionForeground#FFF1DF
notificationCenter.border#FF7300
notificationCenterHeader.background#140D08
notificationCenterHeader.foreground#FFE0A8
notificationLink.foreground#FFB347
notifications.background#1C120B
notifications.border#FF7300
notifications.foreground#FFE0A8
notificationToast.border#FF7300
panel.background#120B06
panel.border#783B13
panelTitle.activeBorder#FF7300
panelTitle.activeForeground#FFF1DF
panelTitle.inactiveForeground#9C5E2D
peekView.border#FF7300
peekViewEditor.background#140D08
peekViewResult.background#120B06
peekViewTitle.background#140D08
quickInput.background#1C120B
quickInput.foreground#FFE0A8
quickInputList.focusBackground#301D11
quickInputTitle.background#140D08
scrollbarSlider.activeBackground#DF5A0080
scrollbarSlider.background#783B1380
scrollbarSlider.hoverBackground#A0501880
sideBar.background#140D08
sideBar.foreground#FFE0A8
sideBarSectionHeader.background#120B06
sideBarSectionHeader.foreground#FFF1DF
sideBarTitle.foreground#FFF1DF
statusBar.background#140D08
statusBar.debuggingBackground#FF7300
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFE0A8
statusBar.noFolderBackground#140D08
statusBarItem.hoverBackground#301D11
tab.activeBackground#120B06
tab.activeBorderTop#FF7300
tab.activeForeground#FFF1DF
tab.border#140D08
tab.inactiveBackground#140D08
tab.inactiveForeground#9C5E2D
terminal.background#120B06
terminal.foreground#FDEAD2
titleBar.activeBackground#140D08
titleBar.activeForeground#FFF1DF
titleBar.inactiveBackground#140D08
titleBar.inactiveForeground#9C5E2D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9C5E2D	italic
string, punctuation.definition.string	#F2C94C	—
keyword, storage.type, storage.modifier	#FF7300	—
entity.name.function, meta.function-call, support.function	#FFA500	bold
variable, meta.definition.variable.name, support.variable	#FDEAD2	—
constant, variable.other.constant	#FFD700	—
constant.numeric	#FF4500	—
keyword.operator	#FF7300	—
entity.name.type, entity.name.class, support.type, support.class	#FFE0A8	—

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