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 — Your Name (Twilight)

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#1E112A
activityBar.foreground#FBCFE8
activityBar.inactiveForeground#6B21A8
activityBarBadge.background#D946EF
activityBarBadge.foreground#FFFFFF
badge.background#D946EF
badge.foreground#FFFFFF
button.background#D946EF
button.foreground#FFFFFF
button.hoverBackground#C026D3
dropdown.background#2E1A47
dropdown.border#D946EF
dropdown.foreground#FDF4FF
dropdown.listBackground#2E1A47
editor.background#140C1C
editor.findMatchBackground#38BDF860
editor.findMatchHighlightBackground#38BDF840
editor.foreground#FDF4FF
editor.lineHighlightBackground#2E1A47
editor.selectionBackground#D946EF40
editor.selectionHighlightBackground#D946EF30
editorBracketMatch.background#D946EF40
editorBracketMatch.border#38BDF8
editorCursor.foreground#38BDF8
editorGroupHeader.tabsBackground#1E112A
editorLineNumber.activeForeground#FBCFE8
editorLineNumber.foreground#6B21A8
editorSuggestWidget.background#2E1A47
editorSuggestWidget.border#D946EF
editorSuggestWidget.foreground#FDF4FF
editorSuggestWidget.highlightForeground#38BDF8
editorSuggestWidget.selectedBackground#4A044E
input.background#2E1A47
input.border#D946EF
input.foreground#FDF4FF
input.placeholderForeground#A21CAF
inputOption.activeBorder#38BDF8
list.activeSelectionBackground#4A044E
list.activeSelectionForeground#FFFFFF
list.focusBackground#4A044E
list.focusForeground#FFFFFF
list.hoverBackground#2E1A47
list.hoverForeground#FDF4FF
list.inactiveSelectionBackground#2E1A47
list.inactiveSelectionForeground#FDF4FF
menu.background#2E1A47
menu.border#D946EF
menu.foreground#FDF4FF
menu.selectionBackground#D946EF
menu.selectionBorder#D946EF
menu.selectionForeground#FFFFFF
menubar.selectionBackground#4A044E
menubar.selectionForeground#FFFFFF
notificationCenter.border#D946EF
notificationCenterHeader.background#1E112A
notificationCenterHeader.foreground#FDF4FF
notificationLink.foreground#38BDF8
notifications.background#2E1A47
notifications.border#D946EF
notifications.foreground#FDF4FF
notificationToast.border#D946EF
panel.background#140C1C
panel.border#6B21A8
panelTitle.activeBorder#38BDF8
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#A21CAF
peekView.border#38BDF8
peekViewEditor.background#1E112A
peekViewResult.background#140C1C
peekViewTitle.background#1E112A
quickInput.background#2E1A47
quickInput.foreground#FDF4FF
quickInputList.focusBackground#4A044E
quickInputTitle.background#1E112A
scrollbarSlider.activeBackground#D946EF80
scrollbarSlider.background#6B21A880
scrollbarSlider.hoverBackground#A21CAF80
sideBar.background#1E112A
sideBar.foreground#FBCFE8
sideBarSectionHeader.background#140C1C
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#1E112A
statusBar.debuggingBackground#D946EF
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FBCFE8
statusBar.noFolderBackground#1E112A
statusBarItem.hoverBackground#4A044E
tab.activeBackground#140C1C
tab.activeBorderTop#38BDF8
tab.activeForeground#FFFFFF
tab.border#1E112A
tab.inactiveBackground#1E112A
tab.inactiveForeground#A21CAF
terminal.background#140C1C
terminal.foreground#FDF4FF
titleBar.activeBackground#1E112A
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#1E112A
titleBar.inactiveForeground#A21CAF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#A21CAF	italic
string, punctuation.definition.string	#F472B6	—
keyword, storage.type, storage.modifier	#D946EF	—
entity.name.function, meta.function-call, support.function	#38BDF8	bold
variable, meta.definition.variable.name, support.variable	#FDF4FF	—
constant, variable.other.constant	#818CF8	—
constant.numeric	#FB7185	—
keyword.operator	#C084FC	—
entity.name.type, entity.name.class, support.type, support.class	#E879F9	—

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