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 — Eren (Founding Titan)

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4B5563	italic
string, punctuation.definition.string	#D1D5DB	—
keyword, storage.type, storage.modifier	#7F1D1D	—
entity.name.function, meta.function-call, support.function	#F87171	bold
variable, meta.definition.variable.name, support.variable	#E5E7EB	—
constant, variable.other.constant	#9CA3AF	—
constant.numeric	#B91C1C	—
keyword.operator	#DC2626	—
entity.name.type, entity.name.class, support.type, support.class	#F3F4F6	—

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