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 — Emerald Code

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#0a140a
activityBar.foreground#00cc66
dropdown.background#0f1b0f
dropdown.foreground#b8e994
editor.background#0f1b0f
editor.findMatchBackground#00ff9933
editor.findMatchHighlightBackground#00cc6633
editor.foreground#b8e994
editor.lineHighlightBackground#00ff990d
editor.selectionBackground#00ff9933
editorCursor.foreground#00cc66
editorGroupHeader.tabsBackground#0a140a
editorIndentGuide.background#4a6b4a33
editorWhitespace.foreground#4a6b4a
input.background#0f1b0f
input.border#00ff99
input.foreground#b8e994
list.activeSelectionBackground#00ff9933
list.activeSelectionForeground#00cc66
list.hoverBackground#00ff9919
sideBar.background#0a140a
sideBar.foreground#b8e994
statusBar.background#0a140a
statusBar.foreground#00cc66
tab.activeBackground#0f1b0f
tab.activeForeground#00cc66
tab.inactiveBackground#0a140a
tab.inactiveForeground#4a6b4a
titleBar.activeBackground#0a140a
titleBar.activeForeground#00cc66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4a6b4a	italic
string, string.quoted	#66ffcc	—
constant.numeric, constant.language, constant.character, constant.other	#00cc66	—
variable, variable.other	#99ff66	—
keyword, storage.type, storage.modifier	#00ff99	—
entity.name.function, support.function	#33cc33	—
entity.name.type, support.type, support.class	#66ffcc	—
string.regexp, constant.character.escape	#00cc66	—
punctuation.definition, punctuation.separator, punctuation.terminator	#b8e994	—
entity.name.tag, punctuation.definition.tag	#00ff99	—

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