Ryanabx Classic Light Theme

Name: Ryanabx Classic Light Theme
Author: ryanabx

Publisher: ryanabxThemes in package: 1

Light theme designed with inspiration from older Windows applications

GitHub

VS Code preview

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

Ryanabx Classic Light Theme — Ryanabx Classic 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.

activityBar.activeBorder#2b00ff
activityBar.background#FFFFFF
activityBar.border#F2F4F4
activityBar.foreground#000000
activityBarBadge.background#E2EDF4
activityBarBadge.foreground#000000
border#F2F4F4
button.background#D1E1F7
button.foreground#000000
disabledForeground#333333
editor.background#ffffff
editor.border#F0ECE0
editor.foreground#000000
editor.lineHighlightBackground#E8F2FE
editor.lineHighlightBorder#E8F2FE
editorGroupHeader.inactiveBackground#000000
editorGroupHeader.tabsBackground#F0F3F9
editorLineNumber.activeForeground#868686
editorLineNumber.foreground#cacaca
focusBorder#AAAAAA55
foreground#000000
list.activeSelectionBackground#CCE8FF
list.activeSelectionForeground#000000
list.focusOutline#CCE8FF
list.hoverBackground#E5F3FF
list.inactiveSelectionBackground#D9D9D9
menu.background#F9F9F9
menu.selectionBackground#F0F0F0
panel.background#F7F7F7
panel.border#F2F4F4
sideBar.background#ffffff
sideBar.border#F2F4F4
sideBarSectionHeader.background#FFFFFF
sideBarSectionHeader.border#F2F4F4
statusBar.background#E2EDF4
statusBar.debuggingBackground#F0ECE0
statusBar.focusBorder#F2F4F4
statusBar.foreground#000000
statusBar.hoverBackground#FFFFFF
statusBar.noFolderBackground#F0ECE0
statusBar.offlineBackground#F0ECE0
tab.activeBackground#ffffff
tab.activeBorderTop#D2D4D4
tab.activeHoverBorder#000000
tab.hoverBackground#ffffff
tab.inactiveBackground#F7F7F700
tab.inactiveBorder#F2F4F4
titleBar.activeBackground#F0F3F9
titleBar.border#F2F4F4
titleBar.inactiveBackground#F0F3F9
widget.border#F0ECE0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#3f7f5f
keyword.operator, storage.modifier, keyword.other	#000000
keyword.control, storage.type, punctuation.definition.directive, keyword.language	#7f0055	bold
constant.language, support.constant, variable.language, entity.name.function.decorator	#7f0055	bold
variable, support.variable	#000000
entity.name.function	#000000	bold
entity.name.function.definition, support.function	#000000	bold
entity.name.type, entity.other.inherited-class, support.class, support.type	#007d4e
variable.other.property	#0000c0
entity.name.exception	#4f1919
constant.numeric, constant.character, constant	#000000	—
string	#2b00ff
constant.character.escape	#3baaff	—
constant.other.symbol	#3baaff	—

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