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 — Cowboy Bebop (Space Cowboy)

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#0B0C10
activityBar.foreground#E0E7FF
activityBar.inactiveForeground#4B5563
activityBarBadge.background#EF4444
activityBarBadge.foreground#FFFFFF
badge.background#EF4444
badge.foreground#FFFFFF
button.background#3B82F6
button.foreground#FFFFFF
button.hoverBackground#2563EB
dropdown.background#111827
dropdown.border#3B82F6
dropdown.foreground#E0E7FF
dropdown.listBackground#111827
editor.background#050709
editor.findMatchBackground#EF444460
editor.findMatchHighlightBackground#EF444440
editor.foreground#F3F4F6
editor.lineHighlightBackground#1F2937
editor.selectionBackground#3B82F640
editor.selectionHighlightBackground#3B82F630
editorBracketMatch.background#3B82F640
editorBracketMatch.border#3B82F6
editorCursor.foreground#EF4444
editorGroupHeader.tabsBackground#0B0C10
editorLineNumber.activeForeground#60A5FA
editorLineNumber.foreground#4B5563
editorSuggestWidget.background#111827
editorSuggestWidget.border#3B82F6
editorSuggestWidget.foreground#E0E7FF
editorSuggestWidget.highlightForeground#FBBF24
editorSuggestWidget.selectedBackground#1F2937
input.background#111827
input.border#3B82F6
input.foreground#E0E7FF
input.placeholderForeground#6B7280
inputOption.activeBorder#FBBF24
list.activeSelectionBackground#1F2937
list.activeSelectionForeground#FFFFFF
list.focusBackground#1F2937
list.focusForeground#FFFFFF
list.hoverBackground#111827
list.hoverForeground#E0E7FF
list.inactiveSelectionBackground#111827
list.inactiveSelectionForeground#E0E7FF
menu.background#111827
menu.border#3B82F6
menu.foreground#E0E7FF
menu.selectionBackground#3B82F6
menu.selectionBorder#3B82F6
menu.selectionForeground#FFFFFF
menubar.selectionBackground#1F2937
menubar.selectionForeground#FFFFFF
notificationCenter.border#3B82F6
notificationCenterHeader.background#0B0C10
notificationCenterHeader.foreground#E0E7FF
notificationLink.foreground#60A5FA
notifications.background#111827
notifications.border#3B82F6
notifications.foreground#E0E7FF
notificationToast.border#3B82F6
panel.background#050709
panel.border#1F2937
panelTitle.activeBorder#FBBF24
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#6B7280
peekView.border#FBBF24
peekViewEditor.background#0B0C10
peekViewResult.background#050709
peekViewTitle.background#0B0C10
quickInput.background#111827
quickInput.foreground#E0E7FF
quickInputList.focusBackground#1F2937
quickInputTitle.background#0B0C10
scrollbarSlider.activeBackground#3B82F680
scrollbarSlider.background#37415180
scrollbarSlider.hoverBackground#4B556380
sideBar.background#0B0C10
sideBar.foreground#E0E7FF
sideBarSectionHeader.background#050709
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#0B0C10
statusBar.debuggingBackground#EF4444
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#E0E7FF
statusBar.noFolderBackground#0B0C10
statusBarItem.hoverBackground#1F2937
tab.activeBackground#050709
tab.activeBorderTop#FBBF24
tab.activeForeground#FFFFFF
tab.border#0B0C10
tab.inactiveBackground#0B0C10
tab.inactiveForeground#6B7280
terminal.background#050709
terminal.foreground#F3F4F6
titleBar.activeBackground#0B0C10
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#0B0C10
titleBar.inactiveForeground#6B7280

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6B7280	italic
string, punctuation.definition.string	#FBBF24	—
keyword, storage.type, storage.modifier	#60A5FA	—
entity.name.function, meta.function-call, support.function	#FDE047	bold
variable, meta.definition.variable.name, support.variable	#F3F4F6	—
constant, variable.other.constant	#EF4444	—
constant.numeric	#F87171	—
keyword.operator	#3B82F6	—
entity.name.type, entity.name.class, support.type, support.class	#93C5FD	—

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