On first load of the page from a new browser / icognito mode it shows two sun icons when you toggle theme instead of a sun and a moon, after i refresh it works.
`import { Switch } from "@nextui-org/react";
import { SunIcon } from "../Images/SunIcon";
import { MoonIcon } from "../Images/MoonIcon";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
export const ThemeSwitch = () => {
const { theme, setTheme, resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}
const isDarkMode = theme === "dark" || resolvedTheme === "dark";
return (
<Switch
checked={isDarkMode}
size="lg"
color="success"
startContent={<SunIcon />}
endContent={isDarkMode ? <MoonIcon /> : <SunIcon />}
onChange={() => setTheme(isDarkMode ? "light" : "dark")}
>
<span className="hidden md:inline"> Dark mode</span>
</Switch>
);
};
`
This is how it behaves on first load
I tried to use useEffect to delay rendering so it can match the theme, but the issuse persist and i don’t really know what to do. Also i don’t know why the theme doesen’t change when i change system theme
New contributor
Valentin Turcu is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.