addyosmani / addyosmani/factory-demo
Add a persistent light and dark theme toggle
- Linguagem predominante
- TypeScript
- Estrelas
- 2
- Forks
- 3
- Merge médio
- 3min
- PRs com merge (30d)
- 1
Descrição
## 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`
Guia de contribuição
Nenhum guia de contribuição indexado para este repositório
Direção de pesquisa
Start in `lib/theme.ts` to implement pure theme-resolution helpers for OS preference fallback, persisted-value validation, and persistence updates. Then wire those helpers into `app/layout.tsx` for pre-interactive application and into `components/theme-toggle.tsx` for keyboard-operable toggling with accessible state/name updates. Finish with `app/globals.css` for dark-theme tokens and focus treatment, add `lib/theme.test.ts` for default/valid/invalid preference cases, and run the required checks; done is no wrong-theme flash, persisted preference restoration, and stable TMDB attribution.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- css, next.js, react, typescript
- Domínio
- frontend
- Tipo de issue
- Funcionalidade
- Dificuldade
- 3/5
- Tempo estimado
- 1-2 dias
- Status de atividade
- Ativa
- Clareza
- Claramente especificada
- Facilidade para iniciantes
- 74/100