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 — Frieren (Elven Magic)

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#070B14
activityBar.foreground#E0E7FF
activityBar.inactiveForeground#4F46E5
activityBarBadge.background#A5F3FC
activityBarBadge.foreground#000000
badge.background#A5F3FC
badge.foreground#000000
button.background#6366F1
button.foreground#FFFFFF
button.hoverBackground#4F46E5
dropdown.background#0F172A
dropdown.border#6366F1
dropdown.foreground#F8FAFC
dropdown.listBackground#0F172A
editor.background#111827
editor.findMatchBackground#C084FC60
editor.findMatchHighlightBackground#C084FC40
editor.foreground#F1F5F9
editor.lineHighlightBackground#1E293B
editor.selectionBackground#818CF840
editor.selectionHighlightBackground#A5F3FC30
editorBracketMatch.background#A5F3FC40
editorBracketMatch.border#A5F3FC
editorCursor.foreground#A5F3FC
editorGroupHeader.tabsBackground#070B14
editorLineNumber.activeForeground#E0E7FF
editorLineNumber.foreground#475569
editorSuggestWidget.background#0F172A
editorSuggestWidget.border#6366F1
editorSuggestWidget.foreground#F8FAFC
editorSuggestWidget.highlightForeground#A5F3FC
editorSuggestWidget.selectedBackground#1E293B
input.background#0F172A
input.border#6366F1
input.foreground#F8FAFC
input.placeholderForeground#64748B
inputOption.activeBorder#A5F3FC
list.activeSelectionBackground#1E293B
list.activeSelectionForeground#FFFFFF
list.focusBackground#1E293B
list.focusForeground#FFFFFF
list.hoverBackground#0F172A
list.hoverForeground#F8FAFC
list.inactiveSelectionBackground#0F172A
list.inactiveSelectionForeground#F8FAFC
menu.background#0F172A
menu.border#6366F1
menu.foreground#F8FAFC
menu.selectionBackground#6366F1
menu.selectionBorder#6366F1
menu.selectionForeground#FFFFFF
menubar.selectionBackground#1E293B
menubar.selectionForeground#FFFFFF
notificationCenter.border#6366F1
notificationCenterHeader.background#070B14
notificationCenterHeader.foreground#F8FAFC
notificationLink.foreground#A5F3FC
notifications.background#0F172A
notifications.border#6366F1
notifications.foreground#F8FAFC
notificationToast.border#A5F3FC
panel.background#111827
panel.border#475569
panelTitle.activeBorder#A5F3FC
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#64748B
peekView.border#A5F3FC
peekViewEditor.background#070B14
peekViewResult.background#111827
peekViewTitle.background#070B14
quickInput.background#0F172A
quickInput.foreground#F8FAFC
quickInputList.focusBackground#1E293B
quickInputTitle.background#070B14
scrollbarSlider.activeBackground#6366F180
scrollbarSlider.background#33415580
scrollbarSlider.hoverBackground#47556980
sideBar.background#070B14
sideBar.foreground#E0E7FF
sideBarSectionHeader.background#111827
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#070B14
statusBar.debuggingBackground#6366F1
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#E0E7FF
statusBar.noFolderBackground#070B14
statusBarItem.hoverBackground#1E293B
tab.activeBackground#111827
tab.activeBorderTop#A5F3FC
tab.activeForeground#FFFFFF
tab.border#070B14
tab.inactiveBackground#070B14
tab.inactiveForeground#64748B
terminal.background#111827
terminal.foreground#F1F5F9
titleBar.activeBackground#070B14
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#070B14
titleBar.inactiveForeground#64748B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#64748B	italic
string, punctuation.definition.string	#C084FC	—
keyword, storage.type, storage.modifier	#818CF8	—
entity.name.function, meta.function-call, support.function	#A5F3FC	bold
variable, meta.definition.variable.name, support.variable	#F1F5F9	—
constant, variable.other.constant	#E879F9	—
constant.numeric	#A3E635	—
keyword.operator	#93C5FD	—
entity.name.type, entity.name.class, support.type, support.class	#C4B5FD	—

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