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 — Moonlight Mist

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#171a20
activityBar.foreground#fab1a0
dropdown.background#1c1f26
dropdown.foreground#e6e6e6
editor.background#1c1f26
editor.findMatchBackground#a29bfe33
editor.findMatchHighlightBackground#fab1a033
editor.foreground#e6e6e6
editor.lineHighlightBackground#a29bfe0d
editor.selectionBackground#a29bfe33
editorCursor.foreground#fab1a0
editorGroupHeader.tabsBackground#171a20
editorIndentGuide.background#636e7233
editorWhitespace.foreground#636e72
input.background#1c1f26
input.border#a29bfe
input.foreground#e6e6e6
list.activeSelectionBackground#a29bfe33
list.activeSelectionForeground#fab1a0
list.hoverBackground#a29bfe19
sideBar.background#171a20
sideBar.foreground#e6e6e6
statusBar.background#171a20
statusBar.foreground#fab1a0
tab.activeBackground#1c1f26
tab.activeForeground#fab1a0
tab.inactiveBackground#171a20
tab.inactiveForeground#636e72
titleBar.activeBackground#171a20
titleBar.activeForeground#fab1a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#636e72	italic
string, string.quoted	#74b9ff	—
constant.numeric, constant.language, constant.character, constant.other	#fab1a0	—
variable, variable.other	#dfe6e9	—
keyword, storage.type, storage.modifier	#a29bfe	—
entity.name.function, support.function	#81ecec	—
entity.name.type, support.type, support.class	#74b9ff	—
string.regexp, constant.character.escape	#fab1a0	—
punctuation.definition, punctuation.separator, punctuation.terminator	#e6e6e6	—
entity.name.tag, punctuation.definition.tag	#a29bfe	—

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