Skip to main content
Coding Theme

Color themes

VS Code preview

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

src
components
fetchUser.ts
User
tags
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}!`;
}
WSL
1 1
main*
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Cold Snack

colors

Workbench UI color keys from the theme JSON colors map.

keyHEXRGBRGBA
activityBarBadge.background
activityBarBadge.foreground
editor.background
editor.foreground
editor.selectionBackground
editorCursor.foreground

tokenColors

Foregrounds this theme assigns to the token scope catalog. A rule with only a font style is skipped, and a longer matching scope wins. Italic and bold rules are not listed — the preview above shows them in the code.

scopeHEXRGBRGBA
comment
comment.block
comment.block.documentation
comment.line
keyword
_YELLOW-LIGHTER——
keyword.control
_YELLOW-LIGHTER——
keyword.control.flow
_YELLOW-LIGHTER——
keyword.operator
_YELLOW-LIGHTER——
keyword.operator.new
_YELLOW-LIGHTER——
keyword.operator.assignment
_YELLOW-LIGHTER——
keyword.operator.arithmetic
_YELLOW-LIGHTER——
keyword.operator.logical
_YELLOW-LIGHTER——
keyword.other
_YELLOW-LIGHTER——
string
_BLUE-LIGHTEST——
string.interpolated
_BLUE-LIGHTEST——
string.other
_BLUE-LIGHTEST——
string.quoted
_BLUE-LIGHTEST——
string.quoted.double
_BLUE-LIGHTEST——
string.quoted.other
_BLUE-LIGHTEST——
string.quoted.single
_BLUE-LIGHTEST——
string.quoted.triple
_BLUE-LIGHTEST——
string.regexp
_BLUE-LIGHTEST——
string.template
_BLUE-LIGHTEST——
string.unquoted
_BLUE-LIGHTEST——
variable
_ORANGE-LIGHT——
variable.function
_ORANGE-LIGHT——
variable.language
_ORANGE-LIGHT——
variable.name
_ORANGE-LIGHT——
variable.other
_ORANGE-LIGHT——
variable.other.constant
_ORANGE-LIGHT——
variable.other.property
_ORANGE-LIGHT——
variable.other.readwrite
_ORANGE-LIGHT——
variable.parameter
_ORANGE-LIGHT——