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 — Ichigo (Mugetsu)

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#000000
activityBar.foreground#E2E8F0
activityBar.inactiveForeground#1E3A8A
activityBarBadge.background#1E40AF
activityBarBadge.foreground#000000
badge.background#1E40AF
badge.foreground#000000
button.background#1E40AF
button.foreground#FFFFFF
button.hoverBackground#1D4ED8
dropdown.background#020617
dropdown.border#1E40AF
dropdown.foreground#E2E8F0
dropdown.listBackground#020617
editor.background#000000
editor.findMatchBackground#EF444460
editor.findMatchHighlightBackground#EF444440
editor.foreground#F8FAFC
editor.lineHighlightBackground#0F172A
editor.selectionBackground#1E40AF40
editor.selectionHighlightBackground#1E40AF30
editorBracketMatch.background#1E40AF40
editorBracketMatch.border#1E40AF
editorCursor.foreground#3B82F6
editorGroupHeader.tabsBackground#000000
editorLineNumber.activeForeground#E2E8F0
editorLineNumber.foreground#334155
editorSuggestWidget.background#020617
editorSuggestWidget.border#1E40AF
editorSuggestWidget.foreground#E2E8F0
editorSuggestWidget.highlightForeground#3B82F6
editorSuggestWidget.selectedBackground#0F172A
input.background#020617
input.border#1E40AF
input.foreground#E2E8F0
input.placeholderForeground#64748B
inputOption.activeBorder#3B82F6
list.activeSelectionBackground#0F172A
list.activeSelectionForeground#FFFFFF
list.focusBackground#0F172A
list.focusForeground#FFFFFF
list.hoverBackground#020617
list.hoverForeground#E2E8F0
list.inactiveSelectionBackground#020617
list.inactiveSelectionForeground#E2E8F0
menu.background#020617
menu.border#1E40AF
menu.foreground#E2E8F0
menu.selectionBackground#1E40AF
menu.selectionBorder#1E40AF
menu.selectionForeground#FFFFFF
menubar.selectionBackground#0F172A
menubar.selectionForeground#FFFFFF
notificationCenter.border#1E40AF
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#E2E8F0
notificationLink.foreground#3B82F6
notifications.background#020617
notifications.border#1E40AF
notifications.foreground#E2E8F0
notificationToast.border#1E40AF
panel.background#000000
panel.border#1E3A8A
panelTitle.activeBorder#3B82F6
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#64748B
peekView.border#3B82F6
peekViewEditor.background#000000
peekViewResult.background#000000
peekViewTitle.background#000000
quickInput.background#020617
quickInput.foreground#E2E8F0
quickInputList.focusBackground#0F172A
quickInputTitle.background#000000
scrollbarSlider.activeBackground#2563EB80
scrollbarSlider.background#1E3A8A80
scrollbarSlider.hoverBackground#1E40AF80
sideBar.background#000000
sideBar.foreground#E2E8F0
sideBarSectionHeader.background#020617
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#000000
statusBar.debuggingBackground#3B82F6
statusBar.debuggingForeground#000000
statusBar.foreground#E2E8F0
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#0F172A
tab.activeBackground#000000
tab.activeBorderTop#3B82F6
tab.activeForeground#FFFFFF
tab.border#000000
tab.inactiveBackground#000000
tab.inactiveForeground#64748B
terminal.background#000000
terminal.foreground#F8FAFC
titleBar.activeBackground#000000
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#64748B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#334155	italic
string, punctuation.definition.string	#93C5FD	—
keyword, storage.type, storage.modifier	#1E3A8A	—
entity.name.function, meta.function-call, support.function	#60A5FA	bold
variable, meta.definition.variable.name, support.variable	#E2E8F0	—
constant, variable.other.constant	#3B82F6	—
constant.numeric	#F87171	—
keyword.operator	#2563EB	—
entity.name.type, entity.name.class, support.type, support.class	#BFDBFE	—

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