React Context für den Theme-Zustand

Beginnen Sie, indem Sie createContext() mit einem Standardwert aufrufen, der dem Aufbau Ihres Contexts entspricht: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). Der Standardwert wird nur verwendet, wenn eine Komponente den Context ohne einen übergeordneten Provider liest. Das ist hilfreich, um isolierte Komponenten zu testen.

Die ThemeProvider-Komponente ist ein Wrapper, der die gesamte Theme-Logik kapselt. Sie liest beim Mounten die Systemeinstellung aus, verwaltet den theme-State, stellt eine toggleTheme-Funktion bereit und umschließt die Children mit ThemeContext.Provider value={{ theme, toggleTheme }}. Platzieren Sie sie möglichst weit oben in Ihrem Komponentenbaum.

Jede untergeordnete Komponente kann auf das Theme zugreifen, indem sie useContext(ThemeContext) aufruft. Dadurch erhält sie den aktuellen Context-Wert einschließlich theme und toggleTheme. Die Komponente wird automatisch neu gerendert, wenn sich das Theme ändert, und bleibt so ohne Prop Drilling stets synchron.

CSS-Variablen hängen von einem data-theme-Attribut am Root-Element ab. Fügen Sie in ThemeProvider einen useEffect hinzu, der immer dann ausgeführt wird, wenn sich theme ändert: document.documentElement.setAttribute('data-theme', theme). Dadurch werden der React-State und die CSS-Ebene nahtlos miteinander verbunden.

Um die Auswahl des Benutzers über das Neuladen von Seiten hinweg zu speichern, schreiben Sie bei jeder Theme-Änderung in localStorage: localStorage.setItem('theme', theme). Sie können diese Logik in einem benutzerdefinierten useLocalStorage-Hook kapseln, der ein zustandsähnliches Wertepaar zurückgibt und jede Aktualisierung automatisch speichert.

Lesen Sie beim Initialisieren des Theme-States zuerst aus localStorage: localStorage.getItem('theme'). Wenn kein gespeicherter Wert vorhanden ist, greifen Sie über window.matchMedia('(prefers-color-scheme: dark)').matches auf die Systemeinstellung zurück. Diese Initialisierung wird nur einmal beim Mounten ausgeführt.

Die korrekte Priorität von hoch nach niedrig lautet: die in localStorage gespeicherte Benutzereinstellung, anschließend die Systemeinstellung des Betriebssystems und schließlich ein fest codierter Standardwert, normalerweise „light“. Diese Reihenfolge stellt sicher, dass der Benutzer immer die letzte Kontrolle hat und zugleich die Konfiguration des Betriebssystems berücksichtigt wird, wenn er in der App noch keine ausdrückliche Auswahl getroffen hat.

Wenn Sie in jeder Komponente direkt useContext(ThemeContext) aufrufen, machen Sie Implementierungsdetails sichtbar. Exportieren Sie stattdessen einen useTheme-Hook: function useTheme() { return useContext(ThemeContext); }. Komponenten importieren nun useTheme und rufen ihn auf, ohne die zugrunde liegende Context-Implementierung kennen zu müssen.

Die Funktion toggleTheme wechselt zwischen light und dark: setTheme(prev => prev === 'light' ? 'dark' : 'light'). Stellen Sie sie über den Context bereit, damit jeder Button im Komponentenbaum sie auslösen kann. Der State befindet sich an einer zentralen Stelle, und die Umschaltlogik wird überall gemeinsam verwendet.

Das Context-Wertobjekt wird bei jedem Rendern von ThemeProvider neu erstellt. Schließen Sie es in useMemo ein, um unnötige erneute Renderings aller Context-Konsumenten zu verhindern: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Das ist eine gängige Performance-Optimierung für Context-Provider.

Umschließen Sie in Tests die Render-Aufrufe mit einer benutzerdefinierten renderWithTheme-Utility, die ThemeProvider als Wrapper verwendet. Sie können auch einen einfachen Mock-Context für isolierte Tests erstellen: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. So können Sie Komponenten in einem bestimmten Theme-State testen.

Wie lautet die korrekte Prioritätsreihenfolge für die Initialisierung des App-Themes, von der höchsten zur niedrigsten Priorität?

Erstellen Sie einen ThemeContext und einen ThemeProvider, der den Theme-State verwaltet, ihn mit localStorage synchronisiert und data-theme im Dokument setzt. Verwenden Sie für einen übersichtlichen Zugriff einen praktischen useTheme-Hook. Die Prioritätsreihenfolge lautet: gespeicherte Einstellung, Systemeinstellung, Standardwert.