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 — Tengen Uzui (Flashy)

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#0F0B1E
activityBar.foreground#F0ABFC
activityBar.inactiveForeground#4C1D95
activityBarBadge.background#22D3EE
activityBarBadge.foreground#000000
badge.background#D946EF
badge.foreground#FFFFFF
button.background#D946EF
button.foreground#FFFFFF
button.hoverBackground#C026D3
dropdown.background#1E1B4B
dropdown.border#D946EF
dropdown.foreground#FDF4FF
dropdown.listBackground#1E1B4B
editor.background#070414
editor.findMatchBackground#FBBF2460
editor.findMatchHighlightBackground#FBBF2440
editor.foreground#FDF4FF
editor.lineHighlightBackground#17123A
editor.selectionBackground#D946EF40
editor.selectionHighlightBackground#22D3EE30
editorBracketMatch.background#D946EF40
editorBracketMatch.border#22D3EE
editorCursor.foreground#FBBF24
editorGroupHeader.tabsBackground#0F0B1E
editorLineNumber.activeForeground#22D3EE
editorLineNumber.foreground#4C1D95
editorSuggestWidget.background#1E1B4B
editorSuggestWidget.border#D946EF
editorSuggestWidget.foreground#FDF4FF
editorSuggestWidget.highlightForeground#FBBF24
editorSuggestWidget.selectedBackground#2E1065
input.background#1E1B4B
input.border#22D3EE
input.foreground#FDF4FF
input.placeholderForeground#7E22CE
inputOption.activeBorder#FBBF24
list.activeSelectionBackground#2E1065
list.activeSelectionForeground#FFFFFF
list.focusBackground#2E1065
list.focusForeground#FFFFFF
list.hoverBackground#17123A
list.hoverForeground#FDF4FF
list.inactiveSelectionBackground#17123A
list.inactiveSelectionForeground#FDF4FF
menu.background#1E1B4B
menu.border#D946EF
menu.foreground#FDF4FF
menu.selectionBackground#D946EF
menu.selectionBorder#D946EF
menu.selectionForeground#FFFFFF
menubar.selectionBackground#2E1065
menubar.selectionForeground#FFFFFF
notificationCenter.border#D946EF
notificationCenterHeader.background#0F0B1E
notificationCenterHeader.foreground#FDF4FF
notificationLink.foreground#22D3EE
notifications.background#1E1B4B
notifications.border#D946EF
notifications.foreground#FDF4FF
notificationToast.border#22D3EE
panel.background#070414
panel.border#4C1D95
panelTitle.activeBorder#FBBF24
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#7E22CE
peekView.border#22D3EE
peekViewEditor.background#0F0B1E
peekViewResult.background#070414
peekViewTitle.background#0F0B1E
quickInput.background#1E1B4B
quickInput.foreground#FDF4FF
quickInputList.focusBackground#2E1065
quickInputTitle.background#0F0B1E
scrollbarSlider.activeBackground#D946EF80
scrollbarSlider.background#4C1D9580
scrollbarSlider.hoverBackground#7E22CE80
sideBar.background#0F0B1E
sideBar.foreground#FDF4FF
sideBarSectionHeader.background#070414
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#0F0B1E
statusBar.debuggingBackground#D946EF
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FDF4FF
statusBar.noFolderBackground#0F0B1E
statusBarItem.hoverBackground#2E1065
tab.activeBackground#070414
tab.activeBorderTop#22D3EE
tab.activeForeground#FFFFFF
tab.border#0F0B1E
tab.inactiveBackground#0F0B1E
tab.inactiveForeground#7E22CE
terminal.background#070414
terminal.foreground#FDF4FF
titleBar.activeBackground#0F0B1E
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#0F0B1E
titleBar.inactiveForeground#7E22CE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7E22CE	italic
string, punctuation.definition.string	#FBBF24	—
keyword, storage.type, storage.modifier	#D946EF	—
entity.name.function, meta.function-call, support.function	#22D3EE	bold
variable, meta.definition.variable.name, support.variable	#FDF4FF	—
constant, variable.other.constant	#F472B6	—
constant.numeric	#E11D48	—
keyword.operator	#38BDF8	—
entity.name.type, entity.name.class, support.type, support.class	#A78BFA	—

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