Add theming infrastructure (task 08)

CSS-variable multi-theme system (default + warm) × {light, dark, system}; per-user theme/theme_mode columns; no-flash pre-paint script; useTheme hook + ThemePicker component on /settings. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-06 02:50:05 -05:00
parent 6710c8b231
commit 8cc2ef0732
12 changed files with 540 additions and 3 deletions
@@ -14,9 +14,11 @@ Living progress tracker. Update at the end of each task. The canonical brief is

 - **07 — Household seed**. `pnpm db:seed` inserts household "Home" idempotently (powered by `tsx`). `signIn` callback assigns `owner` to the first member of the household and `member` to all subsequent users. `getCurrentSession()` in `src/lib/session.ts` returns `{ user, household, role }` and throws if unauthenticated or unmembered. `/settings/household` renders member list for all roles and a rename form for owner only. `tsc --noEmit` and `pnpm lint` both clean.

+- **08 — Theming infrastructure**. CSS-variable multi-theme system (`default` + `warm`) × `{light, dark, system}`. `users.theme` + `users.themeMode` columns in migration `0002_naive_starbolt.sql`. Theme registry in `src/modules/_core/themes.ts` (THEMES/THEME_MODES arrays — adding a third theme is one CSS block + one registry entry). Root layout reads session and sets `data-theme`/`dark` on `<html>` server-side; inline pre-paint `<script>` covers system mode and signed-out pages (no flash). `useTheme()` hook optimistically flips attributes, writes `localStorage`, and calls `setUserTheme` server action. `<ThemePicker />` component mounts on `/settings` (select for theme, segmented buttons for mode). `tsc --noEmit`, `pnpm lint`, `pnpm build` all clean.
+
 ## Next up

- **08 — Theming infrastructure** ([brief](docs/tasks/08-theming.md)).
+- **09 — Calendar module** (or next task in `docs/tasks/`).

 ## Phase 1 remaining