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 Black Flash

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#4B5563
activityBarBadge.background#EF4444
activityBarBadge.foreground#111827
badge.background#EF4444
badge.foreground#111827
button.background#111827
button.foreground#E2E8F0
button.hoverBackground#1F2937
dropdown.background#000000
dropdown.border#374151
dropdown.foreground#E2E8F0
dropdown.listBackground#000000
editor.background#000000
editor.findMatchBackground#EF444460
editor.findMatchHighlightBackground#EF444440
editor.foreground#E2E8F0
editor.lineHighlightBackground#111827
editor.selectionBackground#374151
editor.selectionHighlightBackground#1F293780
editorBracketMatch.background#37415140
editorBracketMatch.border#6B7280
editorCursor.foreground#E2E8F0
editorGroupHeader.tabsBackground#000000
editorLineNumber.activeForeground#E2E8F0
editorLineNumber.foreground#4B5563
editorSuggestWidget.background#000000
editorSuggestWidget.border#374151
editorSuggestWidget.foreground#E2E8F0
editorSuggestWidget.highlightForeground#EF4444
editorSuggestWidget.selectedBackground#111827
input.background#000000
input.border#374151
input.foreground#E2E8F0
input.placeholderForeground#9CA3AF
inputOption.activeBorder#E2E8F0
list.activeSelectionBackground#111827
list.activeSelectionForeground#E2E8F0
list.focusBackground#111827
list.focusForeground#E2E8F0
list.hoverBackground#0A0A0A
list.hoverForeground#E2E8F0
list.inactiveSelectionBackground#0A0A0A
list.inactiveSelectionForeground#E2E8F0
menu.background#000000
menu.border#374151
menu.foreground#E2E8F0
menu.selectionBackground#111827
menu.selectionBorder#374151
menu.selectionForeground#FFFFFF
menubar.selectionBackground#111827
menubar.selectionForeground#E2E8F0
notificationCenter.border#374151
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#E2E8F0
notificationLink.foreground#E2E8F0
notifications.background#000000
notifications.border#374151
notifications.foreground#E2E8F0
notificationToast.border#374151
panel.background#000000
panel.border#1F2937
panelTitle.activeBorder#E2E8F0
panelTitle.activeForeground#E2E8F0
panelTitle.inactiveForeground#9CA3AF
peekView.border#374151
peekViewEditor.background#0A0A0A
peekViewResult.background#000000
peekViewTitle.background#0A0A0A
quickInput.background#000000
quickInput.foreground#E2E8F0
quickInputList.focusBackground#111827
quickInputTitle.background#0A0A0A
scrollbarSlider.activeBackground#4B556380
scrollbarSlider.background#1F293780
scrollbarSlider.hoverBackground#37415180
sideBar.background#000000
sideBar.foreground#9CA3AF
sideBarSectionHeader.background#0A0A0A
sideBarSectionHeader.foreground#E2E8F0
sideBarTitle.foreground#E2E8F0
statusBar.background#000000
statusBar.debuggingBackground#EF4444
statusBar.debuggingForeground#111827
statusBar.foreground#9CA3AF
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#111827
tab.activeBackground#000000
tab.activeBorderTop#E2E8F0
tab.activeForeground#E2E8F0
tab.border#000000
tab.inactiveBackground#000000
tab.inactiveForeground#9CA3AF
terminal.background#000000
terminal.foreground#E2E8F0
titleBar.activeBackground#000000
titleBar.activeForeground#E2E8F0
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#9CA3AF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6B7280	italic
string, punctuation.definition.string	#6EE7B7	—
keyword, storage.type, storage.modifier	#E2E8F0	—
entity.name.function, meta.function-call, support.function	#FFFFFF	bold
variable, meta.definition.variable.name, support.variable	#D1D5DB	—
constant, variable.other.constant	#93C5FD	—
constant.numeric	#FCA5A5	—
keyword.operator	#9CA3AF	—
entity.name.type, entity.name.class, support.type, support.class	#FFFFFF	—

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