import { IconButton } from "@mui/material"; import React, { useState, useEffect } from "react"; import { Brightness4, Brightness7 } from "@mui/icons-material"; const ThemeChanger = () => { const [themeState, setThemeState] = useState(false); useEffect(() => { const getTheme = localStorage.getItem("Theme"); if (getTheme === "dark") { setThemeState(true); } else { } }, []); useEffect(() => { if (themeState) { localStorage.setItem("Theme", "dark"); document.body.classList.add("dark-mode"); } else { localStorage.setItem("Theme", "light"); document.body.classList.remove("dark-mode"); } }, [themeState]); return ( <div> <IconButton className="icon-button" onClick={() => setThemeState(!themeState)} > {themeState ? <Brightness4 /> : <Brightness7 />} </IconButton> </div> ); }; export default ThemeChanger;

Estoy tratando de hacer que el componente anterior no dispare el evento de la transición que tengo en "modo oscuro" cuando recargo la página. El componente es capaz de alternar un modo oscuro.

Probé un poco de jQuery y el evento window.performance pero no pude hacerlo funcionar. Creo que la solución no es tan difícil, pero estoy muy cargado y mi cerebro ya no funciona. ¿Hay alguien que pueda ayudarme?

PD: utilicé una clase de "precarga" con jQuery y configuré la clase del cuerpo en transición: ninguna, sin embargo, el problema es el efecto de uso, ya que cuando el estado es verdadero, siempre agrega la clase de "modo oscuro".

¡Gracias por adelantado!