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 — Nezuko Kamado (Blood Demon Art)

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#1A1A1A
activityBar.foreground#FDA4AF
activityBar.inactiveForeground#525252
activityBarBadge.background#BE123C
activityBarBadge.foreground#FFFFFF
badge.background#BE123C
badge.foreground#FFFFFF
button.background#E11D48
button.foreground#FFFFFF
button.hoverBackground#BE123C
dropdown.background#262626
dropdown.border#E11D48
dropdown.foreground#FFE4E6
dropdown.listBackground#262626
editor.background#0F0F0F
editor.findMatchBackground#4ADE8060
editor.findMatchHighlightBackground#4ADE8040
editor.foreground#F5F5F5
editor.lineHighlightBackground#262626
editor.selectionBackground#E11D4840
editor.selectionHighlightBackground#FDA4AF30
editorBracketMatch.background#E11D4840
editorBracketMatch.border#4ADE80
editorCursor.foreground#4ADE80
editorGroupHeader.tabsBackground#1A1A1A
editorLineNumber.activeForeground#FDA4AF
editorLineNumber.foreground#525252
editorSuggestWidget.background#262626
editorSuggestWidget.border#E11D48
editorSuggestWidget.foreground#FFE4E6
editorSuggestWidget.highlightForeground#4ADE80
editorSuggestWidget.selectedBackground#404040
input.background#262626
input.border#E11D48
input.foreground#FFE4E6
input.placeholderForeground#737373
inputOption.activeBorder#4ADE80
list.activeSelectionBackground#404040
list.activeSelectionForeground#FFFFFF
list.focusBackground#404040
list.focusForeground#FFFFFF
list.hoverBackground#262626
list.hoverForeground#FFE4E6
list.inactiveSelectionBackground#262626
list.inactiveSelectionForeground#FFE4E6
menu.background#262626
menu.border#E11D48
menu.foreground#FFE4E6
menu.selectionBackground#E11D48
menu.selectionBorder#E11D48
menu.selectionForeground#FFFFFF
menubar.selectionBackground#404040
menubar.selectionForeground#FFFFFF
notificationCenter.border#E11D48
notificationCenterHeader.background#1A1A1A
notificationCenterHeader.foreground#FFE4E6
notificationLink.foreground#4ADE80
notifications.background#262626
notifications.border#E11D48
notifications.foreground#FFE4E6
notificationToast.border#4ADE80
panel.background#0F0F0F
panel.border#525252
panelTitle.activeBorder#4ADE80
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#737373
peekView.border#4ADE80
peekViewEditor.background#1A1A1A
peekViewResult.background#0F0F0F
peekViewTitle.background#1A1A1A
quickInput.background#262626
quickInput.foreground#FFE4E6
quickInputList.focusBackground#404040
quickInputTitle.background#1A1A1A
scrollbarSlider.activeBackground#E11D4880
scrollbarSlider.background#52525280
scrollbarSlider.hoverBackground#73737380
sideBar.background#1A1A1A
sideBar.foreground#FFE4E6
sideBarSectionHeader.background#0F0F0F
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#1A1A1A
statusBar.debuggingBackground#E11D48
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFE4E6
statusBar.noFolderBackground#1A1A1A
statusBarItem.hoverBackground#404040
tab.activeBackground#0F0F0F
tab.activeBorderTop#4ADE80
tab.activeForeground#FFFFFF
tab.border#1A1A1A
tab.inactiveBackground#1A1A1A
tab.inactiveForeground#737373
terminal.background#0F0F0F
terminal.foreground#F5F5F5
titleBar.activeBackground#1A1A1A
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#1A1A1A
titleBar.inactiveForeground#737373

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#737373	italic
string, punctuation.definition.string	#4ADE80	—
keyword, storage.type, storage.modifier	#E11D48	—
entity.name.function, meta.function-call, support.function	#F43F5E	bold
variable, meta.definition.variable.name, support.variable	#F5F5F5	—
constant, variable.other.constant	#FDA4AF	—
constant.numeric	#FB7185	—
keyword.operator	#FCA5A5	—
entity.name.type, entity.name.class, support.type, support.class	#86EFAC	—

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