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 — Sasuke Uchiha (Amaterasu/Susanoo)

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#05000A
activityBar.foreground#E9D5FF
activityBar.inactiveForeground#9333EA
activityBarBadge.background#DC2626
activityBarBadge.foreground#FFFFFF
badge.background#DC2626
badge.foreground#FFFFFF
button.background#7E22CE
button.foreground#FFFFFF
button.hoverBackground#6B21A8
dropdown.background#0A0014
dropdown.border#7E22CE
dropdown.foreground#E9D5FF
dropdown.listBackground#0A0014
editor.background#030005
editor.findMatchBackground#DC262660
editor.findMatchHighlightBackground#DC262640
editor.foreground#F3E8FF
editor.lineHighlightBackground#150029
editor.selectionBackground#7E22CE40
editor.selectionHighlightBackground#7E22CE30
editorBracketMatch.background#DC262640
editorBracketMatch.border#DC2626
editorCursor.foreground#DC2626
editorGroupHeader.tabsBackground#05000A
editorLineNumber.activeForeground#E9D5FF
editorLineNumber.foreground#6B21A8
editorSuggestWidget.background#0A0014
editorSuggestWidget.border#7E22CE
editorSuggestWidget.foreground#E9D5FF
editorSuggestWidget.highlightForeground#DC2626
editorSuggestWidget.selectedBackground#1B0033
input.background#0A0014
input.border#7E22CE
input.foreground#E9D5FF
input.placeholderForeground#9333EA
inputOption.activeBorder#DC2626
list.activeSelectionBackground#1B0033
list.activeSelectionForeground#FFFFFF
list.focusBackground#1B0033
list.focusForeground#FFFFFF
list.hoverBackground#0A0014
list.hoverForeground#E9D5FF
list.inactiveSelectionBackground#0A0014
list.inactiveSelectionForeground#E9D5FF
menu.background#0A0014
menu.border#7E22CE
menu.foreground#E9D5FF
menu.selectionBackground#7E22CE
menu.selectionBorder#7E22CE
menu.selectionForeground#FFFFFF
menubar.selectionBackground#1B0033
menubar.selectionForeground#FFFFFF
notificationCenter.border#7E22CE
notificationCenterHeader.background#05000A
notificationCenterHeader.foreground#E9D5FF
notificationLink.foreground#C084FC
notifications.background#0A0014
notifications.border#7E22CE
notifications.foreground#E9D5FF
notificationToast.border#7E22CE
panel.background#030005
panel.border#3B0764
panelTitle.activeBorder#7E22CE
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#9333EA
peekView.border#DC2626
peekViewEditor.background#05000A
peekViewResult.background#030005
peekViewTitle.background#05000A
quickInput.background#0A0014
quickInput.foreground#E9D5FF
quickInputList.focusBackground#1B0033
quickInputTitle.background#05000A
scrollbarSlider.activeBackground#7E22CE80
scrollbarSlider.background#3B076480
scrollbarSlider.hoverBackground#581C8780
sideBar.background#05000A
sideBar.foreground#E9D5FF
sideBarSectionHeader.background#030005
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#05000A
statusBar.debuggingBackground#DC2626
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#E9D5FF
statusBar.noFolderBackground#05000A
statusBarItem.hoverBackground#1B0033
tab.activeBackground#030005
tab.activeBorderTop#7E22CE
tab.activeForeground#FFFFFF
tab.border#05000A
tab.inactiveBackground#05000A
tab.inactiveForeground#9333EA
terminal.background#030005
terminal.foreground#E9D5FF
titleBar.activeBackground#05000A
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#05000A
titleBar.inactiveForeground#9333EA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6B21A8	italic
string, punctuation.definition.string	#EF4444	—
keyword, storage.type, storage.modifier	#A855F7	—
entity.name.function, meta.function-call, support.function	#D8B4FE	bold
variable, meta.definition.variable.name, support.variable	#F3E8FF	—
constant, variable.other.constant	#FCA5A5	—
constant.numeric	#F87171	—
keyword.operator	#C084FC	—
entity.name.type, entity.name.class, support.type, support.class	#E9D5FF	—

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