Better Light Theme

Name: Better Light Theme
Author: Monarch

Publisher: MonarchThemes in package: 1

A modern, highly customizable light theme with easy color customization

GitHub

VS Code preview

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

Better Light Theme — Better Light Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#f9f9f9
activityBar.foreground#2d2b55
editor.background#ffffff
editor.foreground#2d2b55
sideBar.background#f3f3f3
sideBar.foreground#2d2b55
statusBar.background#218c4d
statusBar.foreground#ffffff
tab.activeBackground#ffffff
tab.activeForeground#2d2b55
tab.inactiveBackground#f3f3f3
titleBar.activeBackground#218c4d
titleBar.activeForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a0a1a7	—
string, string.quoted, string.template, string.interpolated	#16a085	—
keyword, storage.type, storage.modifier	#8e44ad	—
entity.name.function, support.function	#2980b9	—
variable, variable.other	#c0392b	—
constant, variable.other.constant	#e67e22	—
entity.name.type, entity.other.inherited-class	#218c4d	—
punctuation, meta.brace	#34495e	—

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