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 — Cyber Neon

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#0a0c1a
activityBar.foreground#ff33cc
dropdown.background#0d0f20
dropdown.foreground#e6e6e6
editor.background#0d0f20
editor.findMatchBackground#ff007c33
editor.findMatchHighlightBackground#ff33cc33
editor.foreground#e6e6e6
editor.lineHighlightBackground#ff007c0d
editor.selectionBackground#ff007c33
editorCursor.foreground#ff33cc
editorGroupHeader.tabsBackground#0a0c1a
editorIndentGuide.background#7777aa33
editorWhitespace.foreground#7777aa
input.background#0d0f20
input.border#ff007c
input.foreground#e6e6e6
list.activeSelectionBackground#ff007c33
list.activeSelectionForeground#ff33cc
list.hoverBackground#ff007c19
sideBar.background#0a0c1a
sideBar.foreground#e6e6e6
statusBar.background#0a0c1a
statusBar.foreground#ff33cc
tab.activeBackground#0d0f20
tab.activeForeground#ff33cc
tab.inactiveBackground#0a0c1a
tab.inactiveForeground#7777aa
titleBar.activeBackground#0a0c1a
titleBar.activeForeground#ff33cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7777aa	italic
string, string.quoted	#00ffcc	—
constant.numeric, constant.language, constant.character, constant.other	#ff33cc	—
variable, variable.other	#00ff99	—
keyword, storage.type, storage.modifier	#ff007c	—
entity.name.function, support.function	#ffcc00	—
entity.name.type, support.type, support.class	#00ffcc	—
string.regexp, constant.character.escape	#ff33cc	—
punctuation.definition, punctuation.separator, punctuation.terminator	#e6e6e6	—
entity.name.tag, punctuation.definition.tag	#ff007c	—

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