addyosmani / addyosmani/factory-demo

Add a persistent light and dark theme toggle

Aberta
#2 2 comentários 0 reações 0 responsáveis Ver no GitHub
enhancement factory:awaiting-review
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

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.