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 — Kakashi Hatake (Sharingan/Chidori)

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#1E293B
activityBar.foreground#F1F5F9
activityBar.inactiveForeground#64748B
activityBarBadge.background#38BDF8
activityBarBadge.foreground#0F172A
badge.background#38BDF8
badge.foreground#0F172A
button.background#38BDF8
button.foreground#0F172A
button.hoverBackground#0EA5E9
dropdown.background#0F172A
dropdown.border#334155
dropdown.foreground#F8FAFC
dropdown.listBackground#0F172A
editor.background#0B1120
editor.findMatchBackground#EF444460
editor.findMatchHighlightBackground#EF444440
editor.foreground#F1F5F9
editor.lineHighlightBackground#1E293B
editor.selectionBackground#38BDF840
editor.selectionHighlightBackground#38BDF830
editorBracketMatch.background#38BDF840
editorBracketMatch.border#38BDF8
editorCursor.foreground#EF4444
editorGroupHeader.tabsBackground#1E293B
editorLineNumber.activeForeground#F1F5F9
editorLineNumber.foreground#475569
editorSuggestWidget.background#0F172A
editorSuggestWidget.border#334155
editorSuggestWidget.foreground#F1F5F9
editorSuggestWidget.highlightForeground#38BDF8
editorSuggestWidget.selectedBackground#1E293B
input.background#0F172A
input.border#334155
input.foreground#F1F5F9
input.placeholderForeground#64748B
inputOption.activeBorder#38BDF8
list.activeSelectionBackground#1E293B
list.activeSelectionForeground#FFFFFF
list.focusBackground#1E293B
list.focusForeground#FFFFFF
list.hoverBackground#0F172A
list.hoverForeground#F1F5F9
list.inactiveSelectionBackground#0F172A
list.inactiveSelectionForeground#F1F5F9
menu.background#0F172A
menu.border#334155
menu.foreground#F1F5F9
menu.selectionBackground#38BDF8
menu.selectionBorder#38BDF8
menu.selectionForeground#0F172A
menubar.selectionBackground#1E293B
menubar.selectionForeground#FFFFFF
notificationCenter.border#334155
notificationCenterHeader.background#1E293B
notificationCenterHeader.foreground#F1F5F9
notificationLink.foreground#38BDF8
notifications.background#0F172A
notifications.border#334155
notifications.foreground#F1F5F9
notificationToast.border#334155
panel.background#0B1120
panel.border#334155
panelTitle.activeBorder#38BDF8
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#64748B
peekView.border#38BDF8
peekViewEditor.background#1E293B
peekViewResult.background#0B1120
peekViewTitle.background#1E293B
quickInput.background#0F172A
quickInput.foreground#F1F5F9
quickInputList.focusBackground#1E293B
quickInputTitle.background#1E293B
scrollbarSlider.activeBackground#64748B80
scrollbarSlider.background#33415580
scrollbarSlider.hoverBackground#47556980
sideBar.background#1E293B
sideBar.foreground#F1F5F9
sideBarSectionHeader.background#0B1120
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#1E293B
statusBar.debuggingBackground#EF4444
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#F1F5F9
statusBar.noFolderBackground#1E293B
statusBarItem.hoverBackground#334155
tab.activeBackground#0B1120
tab.activeBorderTop#38BDF8
tab.activeForeground#FFFFFF
tab.border#1E293B
tab.inactiveBackground#1E293B
tab.inactiveForeground#64748B
terminal.background#0B1120
terminal.foreground#F8FAFC
titleBar.activeBackground#1E293B
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#1E293B
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	#A7F3D0	—
keyword, storage.type, storage.modifier	#38BDF8	—
entity.name.function, meta.function-call, support.function	#7DD3FC	bold
variable, meta.definition.variable.name, support.variable	#F1F5F9	—
constant, variable.other.constant	#FCA5A5	—
constant.numeric	#EF4444	—
keyword.operator	#BAE6FD	—
entity.name.type, entity.name.class, support.type, support.class	#E2E8F0	—

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