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 Sunset Orange (Productive Amber)

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#161311
activityBar.foreground#94A3B8
activityBar.inactiveForeground#64748B
activityBarBadge.background#FF9800
activityBarBadge.foreground#111827
badge.background#FF9800
badge.foreground#111827
button.background#FF9800
button.foreground#111827
button.hoverBackground#F57C00
dropdown.background#191512
dropdown.border#FF9800
dropdown.foreground#94A3B8
dropdown.listBackground#191512
editor.background#120F0D
editor.findMatchBackground#FFB74D60
editor.findMatchHighlightBackground#FFB74D40
editor.foreground#94A3B8
editor.lineHighlightBackground#241D18
editor.selectionBackground#FF980040
editor.selectionHighlightBackground#FF980030
editorBracketMatch.background#FF980040
editorBracketMatch.border#FF9800
editorCursor.foreground#FF9800
editorGroupHeader.tabsBackground#161311
editorLineNumber.activeForeground#FFB74D
editorLineNumber.foreground#5D4037
editorSuggestWidget.background#191512
editorSuggestWidget.border#FF9800
editorSuggestWidget.foreground#94A3B8
editorSuggestWidget.highlightForeground#FF9800
editorSuggestWidget.selectedBackground#241D18
input.background#191512
input.border#FF9800
input.foreground#94A3B8
input.placeholderForeground#9CA3AF
inputOption.activeBorder#FF9800
list.activeSelectionBackground#241D18
list.activeSelectionForeground#94A3B8
list.focusBackground#241D18
list.focusForeground#94A3B8
list.hoverBackground#191512
list.hoverForeground#94A3B8
list.inactiveSelectionBackground#191512
list.inactiveSelectionForeground#94A3B8
menu.background#191512
menu.border#FF9800
menu.foreground#94A3B8
menu.selectionBackground#FF9800
menu.selectionBorder#FF9800
menu.selectionForeground#111827
menubar.selectionBackground#241D18
menubar.selectionForeground#94A3B8
notificationCenter.border#FF9800
notificationCenterHeader.background#161311
notificationCenterHeader.foreground#94A3B8
notificationLink.foreground#FFA726
notifications.background#191512
notifications.border#FF9800
notifications.foreground#94A3B8
notificationToast.border#FF9800
panel.background#120F0D
panel.border#5D4037
panelTitle.activeBorder#FF9800
panelTitle.activeForeground#94A3B8
panelTitle.inactiveForeground#9CA3AF
peekView.border#FF9800
peekViewEditor.background#161311
peekViewResult.background#120F0D
peekViewTitle.background#161311
quickInput.background#191512
quickInput.foreground#94A3B8
quickInputList.focusBackground#241D18
quickInputTitle.background#161311
scrollbarSlider.activeBackground#8D6E6380
scrollbarSlider.background#5D403780
scrollbarSlider.hoverBackground#6D4C4180
sideBar.background#161311
sideBar.foreground#CBD5E1
sideBarSectionHeader.background#120F0D
sideBarSectionHeader.foreground#94A3B8
sideBarTitle.foreground#94A3B8
statusBar.background#161311
statusBar.debuggingBackground#FF9800
statusBar.debuggingForeground#111827
statusBar.foreground#CBD5E1
statusBar.noFolderBackground#161311
statusBarItem.hoverBackground#241D18
tab.activeBackground#120F0D
tab.activeBorderTop#FF9800
tab.activeForeground#94A3B8
tab.border#161311
tab.inactiveBackground#161311
tab.inactiveForeground#9CA3AF
terminal.background#120F0D
terminal.foreground#94A3B8
titleBar.activeBackground#161311
titleBar.activeForeground#94A3B8
titleBar.inactiveBackground#161311
titleBar.inactiveForeground#9CA3AF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9CA3AF	italic
string, punctuation.definition.string	#FFCA28	—
keyword, storage.type, storage.modifier	#FF9800	—
entity.name.function, meta.function-call, support.function	#FFA726	bold
variable, meta.definition.variable.name, support.variable	#94A3B8	—
constant, variable.other.constant	#FFE082	—
constant.numeric	#FF7043	—
keyword.operator	#F57C00	—
entity.name.type, entity.name.class, support.type, support.class	#FF8A65	—

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