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 Infinity Dark

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#111218
activityBar.foreground#CBD5E1
activityBar.inactiveForeground#4B5563
activityBarBadge.background#9333EA
activityBarBadge.foreground#E2E8F0
badge.background#9333EA
badge.foreground#E2E8F0
button.background#9333EA
button.foreground#E2E8F0
button.hoverBackground#9333EA
dropdown.background#181922
dropdown.border#9333EA
dropdown.foreground#CBD5E1
dropdown.listBackground#181922
editor.background#15161D
editor.findMatchBackground#F8717160
editor.findMatchHighlightBackground#F8717140
editor.foreground#CBD5E1
editor.lineHighlightBackground#171825
editor.selectionBackground#60A5FA40
editor.selectionHighlightBackground#9333EA40
editorBracketMatch.background#9333EA40
editorBracketMatch.border#9333EA
editorCursor.foreground#9333EA
editorGroupHeader.tabsBackground#111218
editorLineNumber.activeForeground#CBD5E1
editorLineNumber.foreground#4B5563
editorSuggestWidget.background#181922
editorSuggestWidget.border#9333EA
editorSuggestWidget.foreground#CBD5E1
editorSuggestWidget.highlightForeground#60A5FA
editorSuggestWidget.selectedBackground#171825
input.background#181922
input.border#9333EA
input.foreground#CBD5E1
input.placeholderForeground#6B7280
inputOption.activeBorder#9333EA
list.activeSelectionBackground#171825
list.activeSelectionForeground#CBD5E1
list.focusBackground#171825
list.focusForeground#CBD5E1
list.hoverBackground#181922
list.hoverForeground#CBD5E1
list.inactiveSelectionBackground#181922
list.inactiveSelectionForeground#CBD5E1
menu.background#181922
menu.border#9333EA
menu.foreground#CBD5E1
menu.selectionBackground#9333EA
menu.selectionBorder#9333EA
menu.selectionForeground#E2E8F0
menubar.selectionBackground#171825
menubar.selectionForeground#CBD5E1
notificationCenter.border#9333EA
notificationCenterHeader.background#111218
notificationCenterHeader.foreground#CBD5E1
notificationLink.foreground#C084FC
notifications.background#181922
notifications.border#9333EA
notifications.foreground#CBD5E1
notificationToast.border#9333EA
panel.background#15161D
panel.border#1F2937
panelTitle.activeBorder#9333EA
panelTitle.activeForeground#CBD5E1
panelTitle.inactiveForeground#6B7280
peekView.border#9333EA
peekViewEditor.background#111218
peekViewResult.background#15161D
peekViewTitle.background#111218
quickInput.background#181922
quickInput.foreground#CBD5E1
quickInputList.focusBackground#171825
quickInputTitle.background#111218
scrollbarSlider.activeBackground#4B556380
scrollbarSlider.background#1F293780
scrollbarSlider.hoverBackground#37415180
sideBar.background#111218
sideBar.foreground#9CA3AF
sideBarSectionHeader.background#15161D
sideBarSectionHeader.foreground#CBD5E1
sideBarTitle.foreground#CBD5E1
statusBar.background#111218
statusBar.debuggingBackground#9333EA
statusBar.debuggingForeground#E2E8F0
statusBar.foreground#9CA3AF
statusBar.noFolderBackground#111218
statusBarItem.hoverBackground#171825
tab.activeBackground#15161D
tab.activeBorderTop#9333EA
tab.activeForeground#CBD5E1
tab.border#111218
tab.inactiveBackground#111218
tab.inactiveForeground#6B7280
terminal.ansiBlack#181922
terminal.ansiBlue#60A5FA
terminal.ansiBrightBlack#4B5563
terminal.ansiBrightBlue#60A5FA
terminal.ansiBrightCyan#06B6D4
terminal.ansiBrightGreen#059669
terminal.ansiBrightMagenta#C084FC
terminal.ansiBrightRed#F87171
terminal.ansiBrightWhite#E2E8F0
terminal.ansiBrightYellow#FBBF24
terminal.ansiCyan#0891B2
terminal.ansiGreen#059669
terminal.ansiMagenta#9333EA
terminal.ansiRed#F87171
terminal.ansiWhite#CBD5E1
terminal.ansiYellow#F59E0B
terminal.background#15161D
terminal.foreground#CBD5E1
titleBar.activeBackground#111218
titleBar.activeForeground#CBD5E1
titleBar.inactiveBackground#111218
titleBar.inactiveForeground#6B7280
widget.shadow#11182740

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6B7280	italic
string, punctuation.definition.string	#059669	—
keyword, storage.type, storage.modifier	#9333EA	—
entity.name.function, meta.function-call, support.function	#60A5FA	bold
variable, meta.definition.variable.name, support.variable	#CBD5E1	—
constant, variable.other.constant	#F59E0B	—
constant.numeric	#F87171	—
keyword.operator	#9333EA	—
entity.name.type, entity.name.class, support.type, support.class	#0891B2	—
variable.other.property, meta.property-name, support.type.property-name	#E2E8F0	—
entity.name.tag, meta.tag.sgml	#9333EA	—
entity.other.attribute-name	#FBBF24	—
meta.method.declaration	#60A5FA	—
punctuation, meta.brace	#9CA3AF	—

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