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 Blood Orange (Red-Orange)

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#1A0500
activityBar.foreground#FFCCBC
activityBar.inactiveForeground#FF8A65
activityBarBadge.background#FF3D00
activityBarBadge.foreground#FFFFFF
badge.background#FF3D00
badge.foreground#FFFFFF
button.background#FF3D00
button.foreground#FFFFFF
button.hoverBackground#DD2C00
dropdown.background#260700
dropdown.border#FF3D00
dropdown.foreground#FFCCBC
dropdown.listBackground#260700
editor.background#110300
editor.findMatchBackground#FF572260
editor.findMatchHighlightBackground#FF572240
editor.foreground#FBE9E7
editor.lineHighlightBackground#260700
editor.selectionBackground#FF3D0040
editor.selectionHighlightBackground#FF3D0030
editorBracketMatch.background#FF3D0040
editorBracketMatch.border#FF3D00
editorCursor.foreground#FF3D00
editorGroupHeader.tabsBackground#1A0500
editorLineNumber.activeForeground#FF8A65
editorLineNumber.foreground#BF360C
editorSuggestWidget.background#260700
editorSuggestWidget.border#FF3D00
editorSuggestWidget.foreground#FFCCBC
editorSuggestWidget.highlightForeground#FF3D00
editorSuggestWidget.selectedBackground#3E0B00
input.background#260700
input.border#FF3D00
input.foreground#FFCCBC
input.placeholderForeground#FF8A65
inputOption.activeBorder#FF3D00
list.activeSelectionBackground#3E0B00
list.activeSelectionForeground#FBE9E7
list.focusBackground#3E0B00
list.focusForeground#FBE9E7
list.hoverBackground#260700
list.hoverForeground#FFCCBC
list.inactiveSelectionBackground#260700
list.inactiveSelectionForeground#FFCCBC
menu.background#260700
menu.border#FF3D00
menu.foreground#FFCCBC
menu.selectionBackground#FF3D00
menu.selectionBorder#FF3D00
menu.selectionForeground#FFFFFF
menubar.selectionBackground#3E0B00
menubar.selectionForeground#FBE9E7
notificationCenter.border#FF3D00
notificationCenterHeader.background#1A0500
notificationCenterHeader.foreground#FFCCBC
notificationLink.foreground#FF8A65
notifications.background#260700
notifications.border#FF3D00
notifications.foreground#FFCCBC
notificationToast.border#FF3D00
panel.background#110300
panel.border#BF360C
panelTitle.activeBorder#FF3D00
panelTitle.activeForeground#FBE9E7
panelTitle.inactiveForeground#FF8A65
peekView.border#FF3D00
peekViewEditor.background#1A0500
peekViewResult.background#110300
peekViewTitle.background#1A0500
quickInput.background#260700
quickInput.foreground#FFCCBC
quickInputList.focusBackground#3E0B00
quickInputTitle.background#1A0500
scrollbarSlider.activeBackground#FF3D0080
scrollbarSlider.background#BF360C80
scrollbarSlider.hoverBackground#DD2C0080
sideBar.background#1A0500
sideBar.foreground#FFCCBC
sideBarSectionHeader.background#110300
sideBarSectionHeader.foreground#FBE9E7
sideBarTitle.foreground#FBE9E7
statusBar.background#1A0500
statusBar.debuggingBackground#FF3D00
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFCCBC
statusBar.noFolderBackground#1A0500
statusBarItem.hoverBackground#3E0B00
tab.activeBackground#110300
tab.activeBorderTop#FF3D00
tab.activeForeground#FBE9E7
tab.border#1A0500
tab.inactiveBackground#1A0500
tab.inactiveForeground#FF8A65
terminal.background#110300
terminal.foreground#FBE9E7
titleBar.activeBackground#1A0500
titleBar.activeForeground#FBE9E7
titleBar.inactiveBackground#1A0500
titleBar.inactiveForeground#FF8A65

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#FF8A65	italic
string, punctuation.definition.string	#FFC107	—
keyword, storage.type, storage.modifier	#FF3D00	—
entity.name.function, meta.function-call, support.function	#FF7043	bold
variable, meta.definition.variable.name, support.variable	#FBE9E7	—
constant, variable.other.constant	#FF9800	—
constant.numeric	#FF5252	—
keyword.operator	#FF3D00	—
entity.name.type, entity.name.class, support.type, support.class	#FFAB91	—

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