Contexte React pour l’état du thème

Commencez par appeler createContext() avec une valeur par défaut correspondant à la structure de votre contexte : const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). La valeur par défaut est utilisée uniquement lorsqu'un composant lit le contexte sans fournisseur parent, ce qui facilite les tests de composants isolés.

Le composant ThemeProvider est une enveloppe qui contient toute la logique du thème. Il lit la préférence système lors de son montage, gère l'état theme, fournit une fonction toggleTheme et enveloppe les éléments enfants dans ThemeContext.Provider value={{ theme, toggleTheme }}. Placez-le près du sommet de l'arbre de composants.

Tout composant descendant peut accéder au thème en appelant useContext(ThemeContext). Cette fonction renvoie la valeur actuelle du contexte, notamment theme et toggleTheme. Le composant est automatiquement rendu à nouveau lorsque le thème change, ce qui le maintient toujours synchronisé sans transmettre les propriétés de proche en proche.

Les variables CSS dépendent d'un attribut data-theme sur l'élément racine. Dans ThemeProvider, ajoutez un useEffect qui s'exécute chaque fois que theme change : document.documentElement.setAttribute('data-theme', theme). Cela relie harmonieusement l'état React et la couche CSS.

Pour conserver le choix de l'utilisateur après les rechargements de page, écrivez dans localStorage chaque fois que le thème change : localStorage.setItem('theme', theme). Vous pouvez encapsuler cette logique dans une fonction personnalisée useLocalStorage qui renvoie une paire similaire à un état et enregistre automatiquement chaque mise à jour.

Lors de l'initialisation de l'état du thème, lisez d'abord localStorage : localStorage.getItem('theme'). Si aucune valeur enregistrée n'existe, utilisez la préférence système comme solution de repli via window.matchMedia('(prefers-color-scheme: dark)').matches. Cette initialisation ne s'exécute qu'une seule fois lors du montage.

L'ordre de priorité correct, de la plus élevée à la plus faible, est le suivant : la préférence utilisateur enregistrée dans localStorage, puis la préférence du système d'exploitation, puis une valeur par défaut codée en dur, généralement le thème clair. Cet ordre garantit que l'utilisateur garde toujours le contrôle final, tout en respectant la configuration de son OS s'il n'a pas fait de choix explicite dans l'application.

Appeler directement useContext(ThemeContext) dans chaque composant expose des détails d'implémentation. Exportez plutôt une fonction useTheme : function useTheme() { return useContext(ThemeContext); }. Les composants importent alors useTheme et l'appellent sans connaître le contexte sous-jacent.

La fonction toggleTheme bascule entre light et dark : setTheme(prev => prev === 'light' ? 'dark' : 'light'). Exposez-la via le contexte afin que n'importe quel bouton de l'arbre puisse la déclencher. L'état est centralisé ; la logique de basculement est partagée partout.

L'objet représentant la valeur du contexte est recréé à chaque rendu de ThemeProvider. Encapsulez-le dans useMemo pour éviter les rendus superflus de tous les consommateurs du contexte : const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Il s'agit d'une optimisation courante des performances pour les fournisseurs de contexte.

Dans les tests, enveloppez les rendus dans un utilitaire personnalisé renderWithTheme qui utilise ThemeProvider comme enveloppe. Vous pouvez également créer un contexte fictif simple pour les tests isolés : ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. Vous pouvez ainsi tester les composants avec un état de thème précis.

Quel est l'ordre de priorité correct pour initialiser le thème de l'application, de la plus élevée à la plus faible ?

Créez un ThemeContext et un ThemeProvider qui gère l'état du thème, le synchronise avec localStorage et définit data-theme sur le document. Utilisez une fonction utilitaire useTheme pour y accéder simplement. L'ordre de priorité est le suivant : préférence enregistrée, puis préférence système, puis valeur par défaut.