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 — Gojo Pure Orange (Vibrant Citrus)

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#1F0A00
activityBar.foreground#FED7AA
activityBar.inactiveForeground#FDBA74
activityBarBadge.background#EA580C
activityBarBadge.foreground#FFFFFF
badge.background#EA580C
badge.foreground#FFFFFF
button.background#EA580C
button.foreground#FFFFFF
button.hoverBackground#C2410C
dropdown.background#290D00
dropdown.border#EA580C
dropdown.foreground#FED7AA
dropdown.listBackground#290D00
editor.background#140600
editor.findMatchBackground#F9731660
editor.findMatchHighlightBackground#F9731640
editor.foreground#FFEDD5
editor.lineHighlightBackground#290D00
editor.selectionBackground#EA580C40
editor.selectionHighlightBackground#EA580C30
editorBracketMatch.background#EA580C40
editorBracketMatch.border#EA580C
editorCursor.foreground#F97316
editorGroupHeader.tabsBackground#1F0A00
editorLineNumber.activeForeground#FDBA74
editorLineNumber.foreground#9A3412
editorSuggestWidget.background#290D00
editorSuggestWidget.border#EA580C
editorSuggestWidget.foreground#FED7AA
editorSuggestWidget.highlightForeground#F97316
editorSuggestWidget.selectedBackground#3A1300
input.background#290D00
input.border#EA580C
input.foreground#FED7AA
input.placeholderForeground#FDBA74
inputOption.activeBorder#F97316
list.activeSelectionBackground#3A1300
list.activeSelectionForeground#FFF7ED
list.focusBackground#3A1300
list.focusForeground#FFF7ED
list.hoverBackground#290D00
list.hoverForeground#FED7AA
list.inactiveSelectionBackground#290D00
list.inactiveSelectionForeground#FED7AA
menu.background#290D00
menu.border#EA580C
menu.foreground#FED7AA
menu.selectionBackground#EA580C
menu.selectionBorder#EA580C
menu.selectionForeground#FFFFFF
menubar.selectionBackground#3A1300
menubar.selectionForeground#FFF7ED
notificationCenter.border#EA580C
notificationCenterHeader.background#1F0A00
notificationCenterHeader.foreground#FED7AA
notificationLink.foreground#FDBA74
notifications.background#290D00
notifications.border#EA580C
notifications.foreground#FED7AA
notificationToast.border#EA580C
panel.background#140600
panel.border#9A3412
panelTitle.activeBorder#F97316
panelTitle.activeForeground#FFF7ED
panelTitle.inactiveForeground#FDBA74
peekView.border#F97316
peekViewEditor.background#1F0A00
peekViewResult.background#140600
peekViewTitle.background#1F0A00
quickInput.background#290D00
quickInput.foreground#FED7AA
quickInputList.focusBackground#3A1300
quickInputTitle.background#1F0A00
scrollbarSlider.activeBackground#EA580C80
scrollbarSlider.background#9A341280
scrollbarSlider.hoverBackground#C2410C80
sideBar.background#1F0A00
sideBar.foreground#FED7AA
sideBarSectionHeader.background#140600
sideBarSectionHeader.foreground#FFF7ED
sideBarTitle.foreground#FFF7ED
statusBar.background#1F0A00
statusBar.debuggingBackground#EA580C
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FED7AA
statusBar.noFolderBackground#1F0A00
statusBarItem.hoverBackground#3A1300
tab.activeBackground#140600
tab.activeBorderTop#F97316
tab.activeForeground#FFF7ED
tab.border#1F0A00
tab.inactiveBackground#1F0A00
tab.inactiveForeground#FDBA74
terminal.background#140600
terminal.foreground#FFEDD5
titleBar.activeBackground#1F0A00
titleBar.activeForeground#FFF7ED
titleBar.inactiveBackground#1F0A00
titleBar.inactiveForeground#FDBA74

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#FDBA74	italic
string, punctuation.definition.string	#FDE047	—
keyword, storage.type, storage.modifier	#F97316	—
entity.name.function, meta.function-call, support.function	#FFF7ED	bold
variable, meta.definition.variable.name, support.variable	#FFEDD5	—
constant, variable.other.constant	#FBBF24	—
constant.numeric	#FB7185	—
keyword.operator	#F97316	—
entity.name.type, entity.name.class, support.type, support.class	#FFEDD5	—

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