addyosmani / addyosmani/factory-demo
Add a persistent light and dark theme toggle
- 主要语言
- TypeScript
- 星标
- 2
- 派生
- 3
- 平均合并
- 3 分钟
- 30 天内合并 PR
- 1
描述
## Why
Give the demo a comfortable light and dark appearance while showing how the factory handles a bounded, testable piece of client-side preference state.
## Scope
- Add a visible, keyboard-operable theme toggle in the site header.
- On a first visit, follow `prefers-color-scheme`.
- After a person chooses a theme, persist that explicit choice in `localStorage` and restore it on later visits.
- Apply the resolved theme before the page becomes interactive so the initial render does not visibly flash the wrong palette.
- Define dark-theme color tokens that preserve the existing editorial design, legibility, focus indication, and TMDB attribution.
## Acceptance criteria
- With no stored preference, the page resolves to the operating-system light/dark preference.
- Activating the toggle switches the page between light and dark, updates its accessible name/state, and persists the explicit choice.
- Reloading restores the saved choice even when it differs from the current system preference.
- Invalid stored values fall back to the system preference.
- A new pure unit test covers preference resolution, valid persisted values, and invalid-value fallback. No existing test file is changed.
- The toggle is usable with keyboard alone and has a visible focus treatment in both themes.
- `npm run typecheck`, `npm run lint`, `npm test`, and `TMDB_USE_MOCKS=true npm run build` pass.
- TMDB attribution remains visible and `TMDB_API_KEY` remains server-only.
## Guardrails
Keep this under 400 changed lines and within at most five files. Do not touch `.env*`, `lib/tmdb.ts`, `next.config.ts`, package files, GitHub workflows, or factory policy/adapters. Do not add a dependency.
## Expected files
`lib/theme.ts`, `lib/theme.test.ts` (new), `components/theme-toggle.tsx`, `app/layout.tsx`, `app/globals.css`
贡献指南
这个仓库没有索引到贡献指南
评估
这个 Issue 还没有评估数据。