React Context för temats tillstånd

Börja med att anropa createContext() med ett standardvärde som överensstämmer med kontextens struktur: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). Standardvärdet används endast när en komponent läser kontexten utan en överordnad Provider, vilket underlättar testning av isolerade komponenter.

Komponenten ThemeProvider är en omslutande komponent som innehåller all temalogik. Den läser systemets inställning vid montering, hanterar tillståndet theme, tillhandahåller funktionen toggleTheme och omsluter underordnade komponenter i ThemeContext.Provider value={{ theme, toggleTheme }}. Placera den nära toppen av komponentträdet.

Alla underordnade komponenter kan komma åt temat genom att anropa useContext(ThemeContext). Detta returnerar det aktuella kontextvärdet, inklusive theme och toggleTheme. Komponenten renderas automatiskt om när temat ändras, så att det alltid hålls synkroniserat utan prop drilling.

CSS-variabler är beroende av attributet data-theme på rotelementet. Lägg till en useEffect i ThemeProvider som körs varje gång theme ändras: document.documentElement.setAttribute('data-theme', theme). Detta skapar en sömlös koppling mellan React-tillståndet och CSS-lagret.

För att spara användarens val mellan omladdningar av sidan skriver ni till localStorage varje gång temat ändras: localStorage.setItem('theme', theme). Denna logik kan kapslas in i en anpassad hook, useLocalStorage, som returnerar ett tillståndsliknande par och automatiskt sparar varje uppdatering.

När temats tillstånd initieras läser ni först från localStorage: localStorage.getItem('theme'). Om inget sparat värde finns använder ni systemets inställning som reserv via window.matchMedia('(prefers-color-scheme: dark)').matches. Denna initiering körs endast en gång vid montering.

Den korrekta prioriteringen från högst till lägst är: sparad användarinställning i localStorage, därefter operativsystemets inställning och slutligen ett hårdkodat standardvärde, vanligtvis light. Denna ordning säkerställer att användaren alltid har sista ordet, samtidigt som operativsystemets konfiguration respekteras om inget uttryckligt val har gjorts i appen.

Att direkt anropa useContext(ThemeContext) i varje komponent exponerar implementeringsdetaljer. Exportera i stället en useTheme-hook: function useTheme() { return useContext(ThemeContext); }. Komponenterna importerar nu useTheme och anropar den utan att känna till den underliggande kontexten.

Funktionen toggleTheme växlar mellan light och dark: setTheme(prev => prev === 'light' ? 'dark' : 'light'). Exponera den via kontexten så att vilken knapp som helst i komponentträdet kan utlösa den. Tillståndet finns på ett ställe, medan växlingslogiken delas överallt.

Kontextvärdesobjektet skapas på nytt vid varje rendering av ThemeProvider. Lägg det i useMemo för att förhindra onödiga omrenderingar av alla kontextkonsumenter: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Detta är en vanlig prestandaoptimering för kontextproviders.

I tester kan ni omsluta renderingar i ett anpassat verktyg, renderWithTheme, som använder ThemeProvider som wrapper. Ni kan också skapa en enkel mockad kontext för isolerade tester: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. På så sätt kan komponenter testas i ett specifikt temaläge.

Skapa en ThemeContext och en ThemeProvider som hanterar temats tillstånd, synkroniserar med localStorage och anger data-theme i dokumentet. Använd en praktisk useTheme-hook för ren och enkel användning. Prioriteringsordningen är: sparad inställning, därefter systemets inställning och slutligen standardvärdet.