Why: The app ships two dark themes (dark, oled) — great on OLED phones, but there's no light option for bright-daylight use, and no "follow the system" mode.
Where:
packages/web/src/pwa/theme.ts — extend ThemeName to "dark" | "oled" | "light", add TERMINAL_BG + THEME_COLOR entries, keep the stored-value validation pattern.packages/web/src/styles/tokens.css — add a [data-theme="light"] block overriding the surface palette (ink → paper, text colors flipped, keep the coral accent readable: check contrast ≥ AA).packages/web/src/settings/SettingsPanel.tsx — add the option to the existing theme picker.packages/web/src/chat/TerminalView.tsx — xterm theme colors come from TERMINAL_BG; give light mode a sensible xterm palette (background, foreground, selection).
Acceptance criteria:
- Three-way choice in Settings; applies instantly (no reload) including the xterm canvas and the
<meta name="theme-color">.
- Stored value survives reload; unknown stored values fall back to
dark (pattern already in loadTheme).
- Terminal text meets WCAG AA contrast in light mode.
- Tests: extend
packages/web/src/pwa/theme.test.ts for the new value + fallback.
Stretch (optional, separate PR welcome): a fourth "system" option that follows prefers-color-scheme.
Why: The app ships two dark themes (
dark,oled) — great on OLED phones, but there's no light option for bright-daylight use, and no "follow the system" mode.Where:
packages/web/src/pwa/theme.ts— extendThemeNameto"dark" | "oled" | "light", addTERMINAL_BG+THEME_COLORentries, keep the stored-value validation pattern.packages/web/src/styles/tokens.css— add a[data-theme="light"]block overriding the surface palette (ink → paper, text colors flipped, keep the coral accent readable: check contrast ≥ AA).packages/web/src/settings/SettingsPanel.tsx— add the option to the existing theme picker.packages/web/src/chat/TerminalView.tsx— xterm theme colors come fromTERMINAL_BG; give light mode a sensible xterm palette (background, foreground, selection).Acceptance criteria:
<meta name="theme-color">.dark(pattern already inloadTheme).packages/web/src/pwa/theme.test.tsfor the new value + fallback.Stretch (optional, separate PR welcome): a fourth "system" option that follows
prefers-color-scheme.