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 — Killua Zoldyck (Godspeed)

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#0B1120
activityBar.foreground#CFFAFE
activityBar.inactiveForeground#312E81
activityBarBadge.background#06B6D4
activityBarBadge.foreground#000000
badge.background#06B6D4
badge.foreground#000000
button.background#06B6D4
button.foreground#000000
button.hoverBackground#0891B2
dropdown.background#111827
dropdown.border#06B6D4
dropdown.foreground#E2E8F0
dropdown.listBackground#111827
editor.background#0B1120
editor.findMatchBackground#22D3EE60
editor.findMatchHighlightBackground#22D3EE40
editor.foreground#E0F2FE
editor.lineHighlightBackground#172554
editor.selectionBackground#06B6D440
editor.selectionHighlightBackground#06B6D430
editorBracketMatch.background#06B6D440
editorBracketMatch.border#06B6D4
editorCursor.foreground#22D3EE
editorGroupHeader.tabsBackground#0B1120
editorLineNumber.activeForeground#22D3EE
editorLineNumber.foreground#312E81
editorSuggestWidget.background#111827
editorSuggestWidget.border#06B6D4
editorSuggestWidget.foreground#E2E8F0
editorSuggestWidget.highlightForeground#22D3EE
editorSuggestWidget.selectedBackground#1E3A8A
input.background#111827
input.border#06B6D4
input.foreground#E2E8F0
input.placeholderForeground#64748B
inputOption.activeBorder#22D3EE
list.activeSelectionBackground#1E3A8A
list.activeSelectionForeground#FFFFFF
list.focusBackground#1E3A8A
list.focusForeground#FFFFFF
list.hoverBackground#111827
list.hoverForeground#E2E8F0
list.inactiveSelectionBackground#111827
list.inactiveSelectionForeground#E2E8F0
menu.background#111827
menu.border#06B6D4
menu.foreground#E2E8F0
menu.selectionBackground#06B6D4
menu.selectionBorder#06B6D4
menu.selectionForeground#000000
menubar.selectionBackground#1E3A8A
menubar.selectionForeground#FFFFFF
notificationCenter.border#06B6D4
notificationCenterHeader.background#0B1120
notificationCenterHeader.foreground#E2E8F0
notificationLink.foreground#22D3EE
notifications.background#111827
notifications.border#06B6D4
notifications.foreground#E2E8F0
notificationToast.border#06B6D4
panel.background#0B1120
panel.border#1E3A8A
panelTitle.activeBorder#06B6D4
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#64748B
peekView.border#22D3EE
peekViewEditor.background#0B1120
peekViewResult.background#111827
peekViewTitle.background#0B1120
quickInput.background#111827
quickInput.foreground#E2E8F0
quickInputList.focusBackground#1E3A8A
quickInputTitle.background#0B1120
scrollbarSlider.activeBackground#06B6D480
scrollbarSlider.background#1E3A8A80
scrollbarSlider.hoverBackground#3B82F680
sideBar.background#0B1120
sideBar.foreground#CFFAFE
sideBarSectionHeader.background#111827
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#0B1120
statusBar.debuggingBackground#06B6D4
statusBar.debuggingForeground#000000
statusBar.foreground#CFFAFE
statusBar.noFolderBackground#0B1120
statusBarItem.hoverBackground#1E3A8A
tab.activeBackground#111827
tab.activeBorderTop#06B6D4
tab.activeForeground#FFFFFF
tab.border#0B1120
tab.inactiveBackground#0B1120
tab.inactiveForeground#64748B
terminal.background#111827
terminal.foreground#E0F2FE
titleBar.activeBackground#0B1120
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#0B1120
titleBar.inactiveForeground#64748B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#64748B	italic
string, punctuation.definition.string	#E2E8F0	—
keyword, storage.type, storage.modifier	#06B6D4	—
entity.name.function, meta.function-call, support.function	#22D3EE	bold
variable, meta.definition.variable.name, support.variable	#E0F2FE	—
constant, variable.other.constant	#F8FAFC	—
constant.numeric	#38BDF8	—
keyword.operator	#0891B2	—
entity.name.type, entity.name.class, support.type, support.class	#CFFAFE	—

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