Subtle Monochrome

Name: Subtle Monochrome
Author: Christopher J. Covert

Publisher: Christopher J. CovertThemes in package: 2

A monochrome theme where all source except comments are one color.

Open in VS Code GitHub

Color themes

VS Code preview

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

Subtle Monochrome — Subtle Monochrome (Light)

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.

button.background#111
button.foreground#fafafa
button.hoverBackground#333
editor.background#fafafa
editor.foreground#111
editorGroupHeader.tabsBackground#fafafa
editorGroupHeader.tabsBorder#ccc
editorLineNumber.activeForeground#111
editorLineNumber.foreground#555
errorForeground#a11
foreground#111
list.activeSelectionBackground#111
list.activeSelectionForeground#ccc
list.dropBackground#ddd
list.hoverBackground#ddd
list.hoverForeground#111
list.inactiveSelectionBackground#111
list.inactiveSelectionForeground#ccc
sideBar.background#eee
sideBar.border#ccc
tab.activeBackground#ddd
tab.activeForeground#111
tab.border#ccc
tab.inactiveBackground#eee
tab.inactiveForeground#555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#787	—
string.quoted.double, string.quoted.single	#551111	—

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