feat(ui): add light theme toggle #29

Merged

vince merged 4 commits from codex/light-mode-toggle into main

2026-06-20 01:17:48 +02:00

vince commented

2026-06-20 00:50:52 +02:00

Owner

Summary

Adds a persistent light/dark theme toggle to the React dashboard while keeping theme helpers and UI pieces under the reusable UI boundary for the future component-library extraction.

Why

The UI needs a light mode before extracting the components into a shared library, and the website needs a visible control to switch between light and dark modes.

Changes

Adds neutral UI theme helpers and a reusable ThemeToggle component.
Applies data-ui-theme on the root element with localStorage persistence and early HTML bootstrap.
Adds light theme tokens and replaces hard-coded dark surface colors with theme variables.
Adds a DashboardFrame action slot for header controls.
Adds Storybook theme toolbar support and a ThemeToggle story.
Updates Playwright coverage and snapshots for the new visible control.

Testing

bun run test:qa
Built preview smoke at http://127.0.0.1:4174 with Playwright desktop/mobile dark-to-light toggle and reload persistence checks.

Notes

Dark remains the default first-load theme to preserve the current production look; light mode is available from the toggle and persists per browser.

## Summary Adds a persistent light/dark theme toggle to the React dashboard while keeping theme helpers and UI pieces under the reusable UI boundary for the future component-library extraction. ## Why The UI needs a light mode before extracting the components into a shared library, and the website needs a visible control to switch between light and dark modes. ## Changes - Adds neutral UI theme helpers and a reusable ThemeToggle component. - Applies data-ui-theme on the root element with localStorage persistence and early HTML bootstrap. - Adds light theme tokens and replaces hard-coded dark surface colors with theme variables. - Adds a DashboardFrame action slot for header controls. - Adds Storybook theme toolbar support and a ThemeToggle story. - Updates Playwright coverage and snapshots for the new visible control. ## Testing - bun run test:qa - Built preview smoke at http://127.0.0.1:4174 with Playwright desktop/mobile dark-to-light toggle and reload persistence checks. ## Notes Dark remains the default first-load theme to preserve the current production look; light mode is available from the toggle and persists per browser.

vince added 1 commit 2026-06-20 00:50:52 +02:00