React Context til tematilstand

Start med at kalde createContext() med en standardværdi, der passer til formen på din kontekst: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). Standardværdien bruges kun, når en komponent læser konteksten uden en overordnet Provider, hvilket er nyttigt, når isolerede komponenter testes.

Komponenten ThemeProvider er en indpakning, der indeholder al logikken til temaet. Den læser systempræferencen ved montering, administrerer tilstanden theme, stiller funktionen toggleTheme til rådighed og omslutter children i ThemeContext.Provider value={{ theme, toggleTheme }}. Placér den tæt på toppen af dit komponenttræ.

Alle underordnede komponenter kan få adgang til temaet ved at kalde useContext(ThemeContext). Det returnerer den aktuelle kontekstværdi, herunder theme og toggleTheme. Komponenten gengives automatisk igen, når temaet ændres, så den altid er synkroniseret uden at sende props gennem flere komponentlag.

CSS-variabler afhænger af attributten data-theme på rodelementet. Tilføj i ThemeProvider en useEffect, der kører, hver gang theme ændres: document.documentElement.setAttribute('data-theme', theme). Det forbinder React-tilstanden og CSS-laget problemfrit.

Hvis brugerens valg skal bevares ved genindlæsning af siden, skal du skrive til localStorage, hver gang temaet ændres: localStorage.setItem('theme', theme). Du kan indkapsle denne logik i en brugerdefineret useLocalStorage-hook, der returnerer et par, som fungerer som en tilstand, og automatisk gemmer hver opdatering.

Læs først fra localStorage, når tematilstanden initialiseres: localStorage.getItem('theme'). Hvis der ikke findes en gemt værdi, skal du bruge systempræferencen som alternativ via window.matchMedia('(prefers-color-scheme: dark)').matches. Denne initialisering kører kun én gang ved montering.

Den korrekte prioritet fra højeste til laveste er: brugerens gemte præference i localStorage, derefter operativsystemets præference og til sidst en fast standardværdi, normalt lys. Denne rækkefølge sikrer, at brugeren altid har den endelige kontrol, samtidig med at operativsystemets indstilling respekteres, hvis brugeren ikke udtrykkeligt har valgt et tema i appen.

Hvis du kalder useContext(ThemeContext) direkte i hver komponent, afslører du implementeringsdetaljer. Eksportér i stedet et useTheme-hook: function useTheme() { return useContext(ThemeContext); }. Komponenterne importerer nu useTheme og kalder det uden at kende noget til den underliggende kontekst.

Funktionen toggleTheme skifter mellem light og dark: setTheme(prev => prev === 'light' ? 'dark' : 'light'). Eksponér den gennem konteksten, så enhver knap hvor som helst i træet kan udløse den. Tilstanden findes ét sted, og skiftelogikken deles overalt.

Kontekstværdiobjektet oprettes igen ved hver gengivelse af ThemeProvider. Omslut det i useMemo for at forhindre unødvendige gengivelser af alle komponenter, der bruger konteksten: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Det er en almindelig ydelsesoptimering for kontekstprovidere.

Ved test skal du omslutte gengivelser med et brugerdefineret renderWithTheme-værktøj, der bruger ThemeProvider som indpakning. Du kan også oprette en enkel simuleret kontekst til isolerede test: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. Det gør det muligt at teste komponenter i en bestemt tematilstand.

Opret en ThemeContext og en ThemeProvider, der administrerer tematilstanden, synkroniserer med localStorage og angiver data-theme på dokumentet. Brug et useTheme-hook for at få en enkel adgang til konteksten. Prioritetsrækkefølgen er: gemt præference, derefter systempræference og til sidst standardværdi.