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 Limitless Dark

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#0F172A
activityBar.foreground#E2E8F0
activityBar.inactiveForeground#64748B
activityBarBadge.background#6366F1
activityBarBadge.foreground#E2E8F0
badge.background#6366F1
badge.foreground#E2E8F0
button.background#6366F1
button.foreground#E2E8F0
button.hoverBackground#4F46E5
dropdown.background#0F172A
dropdown.border#6366F1
dropdown.foreground#E2E8F0
dropdown.listBackground#0F172A
editor.background#0F172A
editor.findMatchBackground#EF444460
editor.findMatchHighlightBackground#EF444430
editor.foreground#E2E8F0
editor.lineHighlightBackground#1E293B
editor.selectionBackground#6366F140
editor.selectionHighlightBackground#6366F120
editorBracketMatch.background#6366F140
editorBracketMatch.border#6366F1
editorCursor.foreground#6366F1
editorGroupHeader.tabsBackground#0F172A
editorLineNumber.activeForeground#E2E8F0
editorLineNumber.foreground#475569
editorSuggestWidget.background#0F172A
editorSuggestWidget.border#6366F1
editorSuggestWidget.foreground#E2E8F0
editorSuggestWidget.highlightForeground#6366F1
editorSuggestWidget.selectedBackground#1E293B
input.background#0F172A
input.border#6366F1
input.foreground#E2E8F0
input.placeholderForeground#64748B
inputOption.activeBorder#6366F1
list.activeSelectionBackground#1E293B
list.activeSelectionForeground#E2E8F0
list.focusBackground#1E293B
list.focusForeground#E2E8F0
list.hoverBackground#0F172A
list.hoverForeground#E2E8F0
list.inactiveSelectionBackground#0F172A
list.inactiveSelectionForeground#E2E8F0
menu.background#0F172A
menu.border#6366F1
menu.foreground#E2E8F0
menu.selectionBackground#6366F1
menu.selectionBorder#6366F1
menu.selectionForeground#E2E8F0
menubar.selectionBackground#1E293B
menubar.selectionForeground#E2E8F0
notificationCenter.border#6366F1
notificationCenterHeader.background#0F172A
notificationCenterHeader.foreground#E2E8F0
notificationLink.foreground#6366F1
notifications.background#0F172A
notifications.border#6366F1
notifications.foreground#E2E8F0
notificationToast.border#6366F1
panel.background#0F172A
panel.border#1E293B
panelTitle.activeBorder#6366F1
panelTitle.activeForeground#E2E8F0
panelTitle.inactiveForeground#94A3B8
peekView.border#6366F1
peekViewEditor.background#0F172A
peekViewResult.background#0F172A
peekViewTitle.background#0F172A
quickInput.background#0F172A
quickInput.foreground#E2E8F0
quickInputList.focusBackground#1E293B
quickInputTitle.background#0F172A
sideBar.background#0F172A
sideBar.foreground#CBD5E1
sideBarSectionHeader.background#1E293B
sideBarSectionHeader.foreground#E2E8F0
sideBarTitle.foreground#E2E8F0
statusBar.background#0F172A
statusBar.debuggingBackground#6366F1
statusBar.debuggingForeground#E2E8F0
statusBar.foreground#CBD5E1
statusBar.noFolderBackground#0F172A
statusBarItem.hoverBackground#1E293B
tab.activeBackground#0F172A
tab.activeBorderTop#6366F1
tab.activeForeground#E2E8F0
tab.border#0F172A
tab.inactiveBackground#0F172A
tab.inactiveForeground#94A3B8
terminal.background#0F172A
terminal.foreground#E2E8F0
titleBar.activeBackground#0F172A
titleBar.activeForeground#E2E8F0
titleBar.inactiveBackground#0F172A
titleBar.inactiveForeground#94A3B8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#64748B	italic
string, punctuation.definition.string	#34D399	—
keyword, storage.type, storage.modifier	#6366F1	—
entity.name.function, meta.function-call, support.function	#93C5FD	bold
variable, meta.definition.variable.name, support.variable	#E2E8F0	—
constant, variable.other.constant	#FBBF24	—
constant.numeric	#F472B6	—
keyword.operator	#6366F1	—
entity.name.type, entity.name.class, support.type, support.class	#38BDF8	—

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