AbdulHaseeb's Aesthetic Themes

Name: AbdulHaseeb's Aesthetic Themes
Author: Abdul Haseeb

Publisher: Abdul HaseebThemes in package: 5

A collection of stunning VS Code themes including Cyber Neon, Solar Sands, Pixel Retro, Moonlight Mist, and Emerald Code

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

AbdulHaseeb's Aesthetic Themes — Pixel Retro

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#0a0a0a
activityBar.foreground#ff6600
dropdown.background#121212
dropdown.foreground#ffffff
editor.background#121212
editor.findMatchBackground#ffcc0033
editor.findMatchHighlightBackground#ff660033
editor.foreground#ffffff
editor.lineHighlightBackground#ffcc000d
editor.selectionBackground#ffcc0033
editorCursor.foreground#ff6600
editorGroupHeader.tabsBackground#0a0a0a
editorIndentGuide.background#99999933
editorWhitespace.foreground#999999
input.background#121212
input.border#ffcc00
input.foreground#ffffff
list.activeSelectionBackground#ffcc0033
list.activeSelectionForeground#ff6600
list.hoverBackground#ffcc0019
sideBar.background#0a0a0a
sideBar.foreground#ffffff
statusBar.background#0a0a0a
statusBar.foreground#ff6600
tab.activeBackground#121212
tab.activeForeground#ff6600
tab.inactiveBackground#0a0a0a
tab.inactiveForeground#999999
titleBar.activeBackground#0a0a0a
titleBar.activeForeground#ff6600

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#999999	italic
string, string.quoted	#00ffff	—
constant.numeric, constant.language, constant.character, constant.other	#ff6600	—
variable, variable.other	#66ff33	—
keyword, storage.type, storage.modifier	#ffcc00	—
entity.name.function, support.function	#ff6699	—
entity.name.type, support.type, support.class	#00ffff	—
string.regexp, constant.character.escape	#ff6600	—
punctuation.definition, punctuation.separator, punctuation.terminator	#ffffff	—
entity.name.tag, punctuation.definition.tag	#ffcc00	—

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