React Context para el estado del tema

Comience llamando a createContext() con un valor predeterminado que coincida con la estructura de su contexto: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). El valor predeterminado solo se utiliza cuando un componente lee el contexto sin un Provider principal, lo que facilita probar componentes aislados.

El componente ThemeProvider es un contenedor que reúne toda la lógica del tema. Lee la preferencia del sistema al montarse, administra el estado theme, proporciona una función toggleTheme y envuelve los elementos hijos en ThemeContext.Provider value={{ theme, toggleTheme }}. Colóquelo cerca de la parte superior del árbol de componentes.

Cualquier componente descendiente puede acceder al tema llamando a useContext(ThemeContext). Esto devuelve el valor actual del contexto, incluidos theme y toggleTheme. El componente se vuelve a renderizar automáticamente cuando cambia el tema, por lo que siempre se mantiene sincronizado sin recurrir al prop drilling.

Las variables CSS dependen de un atributo data-theme en el elemento raíz. En ThemeProvider, añada un useEffect que se ejecute cada vez que cambie theme: document.documentElement.setAttribute('data-theme', theme). Esto conecta el estado de React con la capa CSS sin complicaciones.

Para conservar la elección del usuario después de volver a cargar la página, escriba en localStorage cada vez que cambie el tema: localStorage.setItem('theme', theme). Puede encapsular esta lógica en un hook personalizado useLocalStorage que devuelva un par similar al estado y guarde automáticamente cada actualización.

Al inicializar el estado del tema, lea primero de localStorage: localStorage.getItem('theme'). Si no existe ningún valor guardado, recurra a la preferencia del sistema mediante window.matchMedia('(prefers-color-scheme: dark)').matches. Esta inicialización solo se ejecuta una vez al montarse.

El orden de prioridad correcto, de mayor a menor, es: la preferencia del usuario almacenada en localStorage, después la preferencia del sistema operativo y, por último, un valor predeterminado codificado (normalmente light). Este orden garantiza que el usuario tenga siempre la decisión final y, al mismo tiempo, respeta la configuración de su sistema operativo si no ha elegido explícitamente una opción en la aplicación.

Llamar directamente a useContext(ThemeContext) en cada componente expone detalles de implementación. En su lugar, exporte un hook useTheme: function useTheme() { return useContext(ThemeContext); }. Ahora los componentes importan useTheme y lo llaman sin conocer el contexto subyacente.

La función toggleTheme alterna entre light y dark: setTheme(prev => prev === 'light' ? 'dark' : 'light'). Expóngala mediante el contexto para que cualquier botón del árbol pueda activarla. El estado vive en un único lugar y la lógica de alternancia se comparte en toda la aplicación.

El objeto del valor del contexto se vuelve a crear en cada renderizado de ThemeProvider. Envuélvalo en useMemo para evitar renderizados innecesarios de todos los consumidores del contexto: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Esta es una optimización de rendimiento habitual para los proveedores de contexto.

En las pruebas, envuelva los renderizados en una utilidad personalizada renderWithTheme que utilice ThemeProvider como contenedor. También puede crear un contexto simulado sencillo para realizar pruebas aisladas: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. Esto permite probar los componentes con un estado de tema específico.

¿Cuál es el orden de prioridad correcto para inicializar el tema de la aplicación, de mayor a menor prioridad?

Cree un ThemeContext y un ThemeProvider que administre el estado del tema, lo sincronice con localStorage y establezca data-theme en el documento. Utilice un hook de conveniencia useTheme para consumirlo de forma clara. El orden de prioridad es: preferencia guardada, después preferencia del sistema y, por último, valor predeterminado.