Estoy tratando de construir un interruptor de modo oscuro en JS usando React. Estoy usando Material-UI para diseñar mi página y he logrado que el botón cambie el tema de toda mi página cuando se hace clic. Mi problema es que cada vez que actualizo o cambio las rutas, el estado del botón no se transfiere. ¿Hay algo que me estoy perdiendo?

Este es el código de mi botón:

 export default function ThemeSwitch({ toggleDark, settoggleDark }) { const handleModeChange = () => { settoggleDark(!toggleDark); }; return ( <div className="theme-btn"> <IOSSwitch checked={toggleDark} onChange={handleModeChange} name="toggleDark" color="default" /> </div> ); }

Y esta es mi App.js:

 function App() { const [toggleDark, settoggleDark] = useState(false); const myTheme = createTheme({ palette: { mode: toggleDark ? "dark" : "light", primary: { main: "#ff1744", }, secondary: { main: "#880e4f", }, }, }); return ( <Router> <ThemeProvider theme={myTheme}> <CssBaseline /> <Navbar /> <ThemeSwitch toggleDark={toggleDark} settoggleDark={settoggleDark} className="theme-btn" /> <UserAuthContextProvider> <Routes> <Route path="/" element={ <ProtectedRoute> <Hero /> </ProtectedRoute> } /> <Route path="signup" element={<SignUp />} /> <Route path="signin" element={<SignIn />} /> </Routes> </UserAuthContextProvider> </ThemeProvider> </Router> ); }