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
Kasen Theme

colors

Workbench UI color keys from the theme JSON colors map.

keyHEXRGBRGBA
activityBar.background
activityBarBadge.background
button.background
editorCursor.foreground
editorGroup.border
editorGroupHeader.tabsBackground
editorWidget.background
editorWidget.border
focusBorder
input.background
inputOption.activeBorder
list.activeSelectionBackground
list.focusOutline
list.hoverBackground
list.inactiveSelectionBackground
menu.background
menu.border
panel.border
sideBar.background
sideBarSectionHeader.background
statusBar.background
tab.border
tab.inactiveBackground
titleBar.activeBackground
titleBar.inactiveBackground
tree.indentGuidesStroke
widget.shadow

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.

This theme does not set foregrounds for these scopes.