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

Solar Sands

VS Code preview

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

AbdulHaseeb's Aesthetic Themes — Solar Sands

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#241710
activityBar.foreground#ffd166
dropdown.background#2b1b0f
dropdown.foreground#f1e8c1
editor.background#2b1b0f
editor.findMatchBackground#ffaf0033
editor.findMatchHighlightBackground#ffd16633
editor.foreground#f1e8c1
editor.lineHighlightBackground#ffaf000d
editor.selectionBackground#ffaf0033
editorCursor.foreground#ffd166
editorGroupHeader.tabsBackground#241710
editorIndentGuide.background#6b422633
editorWhitespace.foreground#6b4226
input.background#2b1b0f
input.border#ffaf00
input.foreground#f1e8c1
list.activeSelectionBackground#ffaf0033
list.activeSelectionForeground#ffd166
list.hoverBackground#ffaf0019
sideBar.background#241710
sideBar.foreground#f1e8c1
statusBar.background#241710
statusBar.foreground#ffd166
tab.activeBackground#2b1b0f
tab.activeForeground#ffd166
tab.inactiveBackground#241710
tab.inactiveForeground#6b4226
titleBar.activeBackground#241710
titleBar.activeForeground#ffd166

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6b4226	italic
string, string.quoted	#ff5733	—
constant.numeric, constant.language, constant.character, constant.other	#ffd166	—
variable, variable.other	#ff8c42	—
keyword, storage.type, storage.modifier	#ffaf00	—
entity.name.function, support.function	#e63946	—
entity.name.type, support.type, support.class	#ff5733	—
string.regexp, constant.character.escape	#ffd166	—
punctuation.definition, punctuation.separator, punctuation.terminator	#f1e8c1	—
entity.name.tag, punctuation.definition.tag	#ffaf00	—

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