Skip to content

Theme: add a light terminal theme #67

Description

@burakgon

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issueGood for newcomershelp wantedExtra attention is neededwebWeb PWA (packages/web)

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions