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 — Jotaro Kujo (Star Platinum)

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#0B0515
activityBar.foreground#E0E7FF
activityBar.inactiveForeground#312E81
activityBarBadge.background#06B6D4
activityBarBadge.foreground#FFFFFF
badge.background#06B6D4
badge.foreground#FFFFFF
button.background#4F46E5
button.foreground#FFFFFF
button.hoverBackground#4338CA
dropdown.background#1E1B4B
dropdown.border#4F46E5
dropdown.foreground#E0E7FF
dropdown.listBackground#1E1B4B
editor.background#05020B
editor.findMatchBackground#EC489960
editor.findMatchHighlightBackground#EC489940
editor.foreground#EEF2FF
editor.lineHighlightBackground#171032
editor.selectionBackground#818CF840
editor.selectionHighlightBackground#818CF830
editorBracketMatch.background#06B6D440
editorBracketMatch.border#06B6D4
editorCursor.foreground#EC4899
editorGroupHeader.tabsBackground#0B0515
editorLineNumber.activeForeground#06B6D4
editorLineNumber.foreground#3730A3
editorSuggestWidget.background#1E1B4B
editorSuggestWidget.border#4F46E5
editorSuggestWidget.foreground#E0E7FF
editorSuggestWidget.highlightForeground#FBBF24
editorSuggestWidget.selectedBackground#312E81
input.background#1E1B4B
input.border#4F46E5
input.foreground#E0E7FF
input.placeholderForeground#4F46E5
inputOption.activeBorder#EC4899
list.activeSelectionBackground#312E81
list.activeSelectionForeground#FFFFFF
list.focusBackground#312E81
list.focusForeground#FFFFFF
list.hoverBackground#171032
list.hoverForeground#E0E7FF
list.inactiveSelectionBackground#171032
list.inactiveSelectionForeground#E0E7FF
menu.background#1E1B4B
menu.border#4F46E5
menu.foreground#E0E7FF
menu.selectionBackground#4F46E5
menu.selectionBorder#4F46E5
menu.selectionForeground#FFFFFF
menubar.selectionBackground#312E81
menubar.selectionForeground#FFFFFF
notificationCenter.border#4F46E5
notificationCenterHeader.background#0B0515
notificationCenterHeader.foreground#E0E7FF
notificationLink.foreground#06B6D4
notifications.background#1E1B4B
notifications.border#4F46E5
notifications.foreground#E0E7FF
notificationToast.border#06B6D4
panel.background#05020B
panel.border#3730A3
panelTitle.activeBorder#EC4899
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#4F46E5
peekView.border#06B6D4
peekViewEditor.background#0B0515
peekViewResult.background#05020B
peekViewTitle.background#0B0515
quickInput.background#1E1B4B
quickInput.foreground#E0E7FF
quickInputList.focusBackground#312E81
quickInputTitle.background#0B0515
scrollbarSlider.activeBackground#818CF880
scrollbarSlider.background#3730A380
scrollbarSlider.hoverBackground#4F46E580
sideBar.background#0B0515
sideBar.foreground#E0E7FF
sideBarSectionHeader.background#05020B
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#0B0515
statusBar.debuggingBackground#4F46E5
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#E0E7FF
statusBar.noFolderBackground#0B0515
statusBarItem.hoverBackground#312E81
tab.activeBackground#05020B
tab.activeBorderTop#EC4899
tab.activeForeground#FFFFFF
tab.border#0B0515
tab.inactiveBackground#0B0515
tab.inactiveForeground#4F46E5
terminal.background#05020B
terminal.foreground#EEF2FF
titleBar.activeBackground#0B0515
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#0B0515
titleBar.inactiveForeground#4F46E5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4F46E5	italic
string, punctuation.definition.string	#06B6D4	—
keyword, storage.type, storage.modifier	#A855F7	—
entity.name.function, meta.function-call, support.function	#FBBF24	bold
variable, meta.definition.variable.name, support.variable	#EEF2FF	—
constant, variable.other.constant	#EC4899	—
constant.numeric	#F472B6	—
keyword.operator	#818CF8	—
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}!`;
}