Estoy implementando un modo oscuro y me quedé atascado en esta parte de mi proyecto, donde todo parece funcionar, pero no funciona. No hay ningún error, pero mi Contexto en la aplicación, no se vuelve a procesar cuando uso setTheme dentro del Proveedor, ¿cómo puedo solucionarlo?

Aplicación.jsx

 import { useContext } from "react" import { ThemeLocalContext, ThemeLocalProvider } from "./context/ThemeContext" import { ThemeProvider } from "styled-components" import {Paths} from "./pages/Paths/" import { GlobalStyle } from "./styles/GlobalStyle/GlobalStyle" function App() { const theme = useContext(ThemeLocalContext); console.log(theme) return ( <div> <ThemeLocalProvider> <> <ThemeProvider theme={theme}> <GlobalStyle/> <Paths/> </ThemeProvider> </> </ThemeLocalProvider> </div> ) } export default App

ThemeContext.jsx

 import React, { createContext, useState } from "react"; import { lightTheme } from "../styles/Theme/lightTheme"; import { darkTheme } from "../styles/Theme/darkTheme"; export const ThemeLocalContext = createContext(lightTheme); export const ThemeLocalProvider = ({children}) => { const [theme, setTheme] = useState(darkTheme); const handleChange = () => { setTheme(theme.title === 'light'? darkTheme : lightTheme) } return ( <ThemeLocalContext.Provider value={[theme, handleChange]}> {children} </ThemeLocalContext.Provider> ) }

No creo que el error esté aquí, pero también dejaré mi código de Header aquí, aquí es donde ejecuto la función setTheme, cuyo nombre es handleChange , y lo uso con theme[1] .

Encabezado.jsx

 import ReactSwitch from "react-switch"; import {useContext, useState} from 'react' import { ThemeLocalContext } from "../../context/ThemeContext"; const Header = () => { const theme = useContext(ThemeLocalContext) return( <div> <h1>{theme[0].colors.primary}</h1> <ReactSwitch checked={theme[0].title === 'dark'} onChange={theme[1]} /> </div> ) } export default Header;