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 — Sung Jin-Woo (Shadow Monarch)

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#020617
activityBar.foreground#E0E7FF
activityBar.inactiveForeground#1E3A8A
activityBarBadge.background#3B82F6
activityBarBadge.foreground#000000
badge.background#3B82F6
badge.foreground#000000
button.background#1E3A8A
button.foreground#FFFFFF
button.hoverBackground#1D4ED8
dropdown.background#0F172A
dropdown.border#1E3A8A
dropdown.foreground#E0E7FF
dropdown.listBackground#0F172A
editor.background#050A15
editor.findMatchBackground#6366F160
editor.findMatchHighlightBackground#6366F140
editor.foreground#F8FAFC
editor.lineHighlightBackground#0F172A
editor.selectionBackground#1E3A8A40
editor.selectionHighlightBackground#1E3A8A30
editorBracketMatch.background#1E3A8A40
editorBracketMatch.border#3B82F6
editorCursor.foreground#60A5FA
editorGroupHeader.tabsBackground#020617
editorLineNumber.activeForeground#60A5FA
editorLineNumber.foreground#1E3A8A
editorSuggestWidget.background#0F172A
editorSuggestWidget.border#1E3A8A
editorSuggestWidget.foreground#E0E7FF
editorSuggestWidget.highlightForeground#3B82F6
editorSuggestWidget.selectedBackground#172554
input.background#0F172A
input.border#1E3A8A
input.foreground#E0E7FF
input.placeholderForeground#3B82F6
inputOption.activeBorder#60A5FA
list.activeSelectionBackground#172554
list.activeSelectionForeground#FFFFFF
list.focusBackground#172554
list.focusForeground#FFFFFF
list.hoverBackground#0F172A
list.hoverForeground#E0E7FF
list.inactiveSelectionBackground#0F172A
list.inactiveSelectionForeground#E0E7FF
menu.background#0F172A
menu.border#1E3A8A
menu.foreground#E0E7FF
menu.selectionBackground#1E3A8A
menu.selectionBorder#1E3A8A
menu.selectionForeground#FFFFFF
menubar.selectionBackground#172554
menubar.selectionForeground#FFFFFF
notificationCenter.border#1E3A8A
notificationCenterHeader.background#020617
notificationCenterHeader.foreground#E0E7FF
notificationLink.foreground#3B82F6
notifications.background#0F172A
notifications.border#1E3A8A
notifications.foreground#E0E7FF
notificationToast.border#1E3A8A
panel.background#050A15
panel.border#1E3A8A
panelTitle.activeBorder#3B82F6
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#1E3A8A
peekView.border#3B82F6
peekViewEditor.background#020617
peekViewResult.background#050A15
peekViewTitle.background#020617
quickInput.background#0F172A
quickInput.foreground#E0E7FF
quickInputList.focusBackground#172554
quickInputTitle.background#020617
scrollbarSlider.activeBackground#3B82F680
scrollbarSlider.background#1E3A8A80
scrollbarSlider.hoverBackground#1D4ED880
sideBar.background#020617
sideBar.foreground#E0E7FF
sideBarSectionHeader.background#050A15
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#020617
statusBar.debuggingBackground#3B82F6
statusBar.debuggingForeground#000000
statusBar.foreground#E0E7FF
statusBar.noFolderBackground#020617
statusBarItem.hoverBackground#172554
tab.activeBackground#050A15
tab.activeBorderTop#3B82F6
tab.activeForeground#FFFFFF
tab.border#020617
tab.inactiveBackground#020617
tab.inactiveForeground#475569
terminal.background#050A15
terminal.foreground#F8FAFC
titleBar.activeBackground#020617
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#020617
titleBar.inactiveForeground#475569

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#3B82F6	italic
string, punctuation.definition.string	#818CF8	—
keyword, storage.type, storage.modifier	#93C5FD	—
entity.name.function, meta.function-call, support.function	#60A5FA	bold
variable, meta.definition.variable.name, support.variable	#F8FAFC	—
constant, variable.other.constant	#A5B4FC	—
constant.numeric	#C7D2FE	—
keyword.operator	#3B82F6	—
entity.name.type, entity.name.class, support.type, support.class	#E0E7FF	—

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