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 — Gojo Six Eyes (Blue)

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#0F1622
activityBar.foreground#CBD5E1
activityBar.inactiveForeground#4B5563
activityBarBadge.background#0891B2
activityBarBadge.foreground#111827
badge.background#0891B2
badge.foreground#111827
button.background#0891B2
button.foreground#111827
button.hoverBackground#0891B2
dropdown.background#1E293B
dropdown.border#0891B2
dropdown.foreground#CBD5E1
dropdown.listBackground#1E293B
editor.background#121828
editor.findMatchBackground#F8717160
editor.findMatchHighlightBackground#F8717140
editor.foreground#CBD5E1
editor.lineHighlightBackground#1E293B
editor.selectionBackground#0891B240
editor.selectionHighlightBackground#0891B230
editorBracketMatch.background#0891B240
editorBracketMatch.border#0891B2
editorCursor.foreground#0891B2
editorGroupHeader.tabsBackground#0F1622
editorLineNumber.activeForeground#CBD5E1
editorLineNumber.foreground#475569
editorSuggestWidget.background#1E293B
editorSuggestWidget.border#0891B2
editorSuggestWidget.foreground#CBD5E1
editorSuggestWidget.highlightForeground#0891B2
editorSuggestWidget.selectedBackground#1E293B
input.background#1E293B
input.border#0891B2
input.foreground#CBD5E1
input.placeholderForeground#64748B
inputOption.activeBorder#0891B2
list.activeSelectionBackground#1E293B
list.activeSelectionForeground#CBD5E1
list.focusBackground#1E293B
list.focusForeground#CBD5E1
list.hoverBackground#1E293B
list.hoverForeground#CBD5E1
list.inactiveSelectionBackground#1E293B
list.inactiveSelectionForeground#CBD5E1
menu.background#1E293B
menu.border#0891B2
menu.foreground#CBD5E1
menu.selectionBackground#0891B2
menu.selectionBorder#0891B2
menu.selectionForeground#111827
menubar.selectionBackground#1E293B
menubar.selectionForeground#CBD5E1
notificationCenter.border#0891B2
notificationCenterHeader.background#0F1622
notificationCenterHeader.foreground#CBD5E1
notificationLink.foreground#67E8F9
notifications.background#1E293B
notifications.border#0891B2
notifications.foreground#CBD5E1
notificationToast.border#0891B2
panel.background#121828
panel.border#1E293B
panelTitle.activeBorder#0891B2
panelTitle.activeForeground#CBD5E1
panelTitle.inactiveForeground#64748B
peekView.border#0891B2
peekViewEditor.background#0F1622
peekViewResult.background#121828
peekViewTitle.background#0F1622
quickInput.background#1E293B
quickInput.foreground#CBD5E1
quickInputList.focusBackground#1E293B
quickInputTitle.background#0F1622
sideBar.background#0F1622
sideBar.foreground#94A3B8
sideBarSectionHeader.background#121828
sideBarSectionHeader.foreground#CBD5E1
sideBarTitle.foreground#CBD5E1
statusBar.background#0F1622
statusBar.debuggingBackground#0891B2
statusBar.debuggingForeground#111827
statusBar.foreground#94A3B8
statusBar.noFolderBackground#0F1622
statusBarItem.hoverBackground#1E293B
tab.activeBackground#121828
tab.activeBorderTop#0891B2
tab.activeForeground#CBD5E1
tab.border#0F1622
tab.inactiveBackground#0F1622
tab.inactiveForeground#64748B
terminal.background#121828
terminal.foreground#CBD5E1
titleBar.activeBackground#0F1622
titleBar.activeForeground#CBD5E1
titleBar.inactiveBackground#0F1622
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	#0EA5E9	—
keyword, storage.type, storage.modifier	#06B6D4	—
entity.name.function, meta.function-call, support.function	#818CF8	bold
variable, meta.definition.variable.name, support.variable	#E2E8F0	—
constant, variable.other.constant	#F472B6	—
constant.numeric	#C084FC	—
keyword.operator	#06B6D4	—
entity.name.type, entity.name.class, support.type, support.class	#67E8F9	—

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