addyosmani / addyosmani/factory-demo

Add a persistent light and dark theme toggle

未关闭
#2 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
enhancement factory:awaiting-review
主要语言
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 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。