Tyler's Programming Mode Theme For VSCode

Name: Tyler's Programming Mode Theme For VSCode
Author: TylerPeppy

Publisher: TylerPeppyThemes in package: 1

A simple and elegant yet modern color theme for VSCode with cooler tones for ease on the eyes and maximum concentration.

GitHub

VS Code preview

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

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#181c20
activityBar.border#494848
activityBarBadge.background#13679e
button.background#377c8d
button.border#097377
button.hoverBackground#424040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#ffffff	bold
variable, string constant.other.placeholder	#135858	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#ff002b	—
keyword, storage.type, storage.modifier

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Tyler's Programming Mode Theme For VSCode | Coding Theme

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