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 — Toji Fushiguro (Sorcerer Killer)

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#0B100E
activityBar.foreground#D1D5DB
activityBar.inactiveForeground#374151
activityBarBadge.background#14B8A6
activityBarBadge.foreground#000000
badge.background#14B8A6
badge.foreground#000000
button.background#0F766E
button.foreground#FFFFFF
button.hoverBackground#0D9488
dropdown.background#111827
dropdown.border#0F766E
dropdown.foreground#F3F4F6
dropdown.listBackground#111827
editor.background#0F172A
editor.findMatchBackground#8B5CF660
editor.findMatchHighlightBackground#8B5CF640
editor.foreground#E5E7EB
editor.lineHighlightBackground#1E293B
editor.selectionBackground#0F766E40
editor.selectionHighlightBackground#0F766E30
editorBracketMatch.background#0F766E40
editorBracketMatch.border#14B8A6
editorCursor.foreground#2DD4BF
editorGroupHeader.tabsBackground#0B100E
editorLineNumber.activeForeground#2DD4BF
editorLineNumber.foreground#475569
editorSuggestWidget.background#111827
editorSuggestWidget.border#0F766E
editorSuggestWidget.foreground#F3F4F6
editorSuggestWidget.highlightForeground#14B8A6
editorSuggestWidget.selectedBackground#1F2937
input.background#111827
input.border#0F766E
input.foreground#F3F4F6
input.placeholderForeground#4B5563
inputOption.activeBorder#14B8A6
list.activeSelectionBackground#1F2937
list.activeSelectionForeground#FFFFFF
list.focusBackground#1F2937
list.focusForeground#FFFFFF
list.hoverBackground#111827
list.hoverForeground#F3F4F6
list.inactiveSelectionBackground#111827
list.inactiveSelectionForeground#F3F4F6
menu.background#111827
menu.border#0F766E
menu.foreground#F3F4F6
menu.selectionBackground#0F766E
menu.selectionBorder#0F766E
menu.selectionForeground#FFFFFF
menubar.selectionBackground#1F2937
menubar.selectionForeground#FFFFFF
notificationCenter.border#0F766E
notificationCenterHeader.background#0B100E
notificationCenterHeader.foreground#F3F4F6
notificationLink.foreground#14B8A6
notifications.background#111827
notifications.border#0F766E
notifications.foreground#F3F4F6
notificationToast.border#0F766E
panel.background#0F172A
panel.border#1E293B
panelTitle.activeBorder#14B8A6
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#4B5563
peekView.border#14B8A6
peekViewEditor.background#0B100E
peekViewResult.background#0F172A
peekViewTitle.background#0B100E
quickInput.background#111827
quickInput.foreground#F3F4F6
quickInputList.focusBackground#1F2937
quickInputTitle.background#0B100E
scrollbarSlider.activeBackground#0F766E80
scrollbarSlider.background#37415180
scrollbarSlider.hoverBackground#4B556380
sideBar.background#0B100E
sideBar.foreground#D1D5DB
sideBarSectionHeader.background#0F172A
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#0B100E
statusBar.debuggingBackground#14B8A6
statusBar.debuggingForeground#000000
statusBar.foreground#D1D5DB
statusBar.noFolderBackground#0B100E
statusBarItem.hoverBackground#1F2937
tab.activeBackground#0F172A
tab.activeBorderTop#14B8A6
tab.activeForeground#FFFFFF
tab.border#0B100E
tab.inactiveBackground#0B100E
tab.inactiveForeground#6B7280
terminal.background#0F172A
terminal.foreground#E5E7EB
titleBar.activeBackground#0B100E
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#0B100E
titleBar.inactiveForeground#6B7280

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#64748B	italic
string, punctuation.definition.string	#A7F3D0	—
keyword, storage.type, storage.modifier	#5EEAD4	—
entity.name.function, meta.function-call, support.function	#A78BFA	bold
variable, meta.definition.variable.name, support.variable	#E2E8F0	—
constant, variable.other.constant	#C4B5FD	—
constant.numeric	#94A3B8	—
keyword.operator	#2DD4BF	—
entity.name.type, entity.name.class, support.type, support.class	#F3F4F6	—

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