react-toggle-dark-mode
react-toggle-dark-mode copied to clipboard
JoseRFelix
Toogle doesn't change when the checked prop's state is changes by another components or button
here is the code I'm working with
import { useEffect, useState } from "react" import { useTheme } from "next-themes" import {DarkModeSwitch} from "react-toggle-dark-mode" import tw from "twin.macro"
const ThemeChanger = ({button}) => { const [mounted, setMounted] = useState(false) const { theme, setTheme } = useTheme() const { themes } = useTheme() const [isDarkMode, setDarkMode] = useState(true)
// When mounted on client, now we can show the UI useEffect(() => setMounted(true), [])
const capitalize = (s) => { if (typeof s !== 'string') return '' return s.charAt(0).toUpperCase() + s.slice(1) }
const switchTheme = () => { if (mounted) { setTheme(theme === "light" ? "dark" : "light") theme === "light" ? setDarkMode(true) : setDarkMode(false) } };
return (
button === true
? (
<DarkModeSwitch
moonColor="#e5e7eb"
sunColor="#1f2937"
checked={isDarkMode}
onChange={switchTheme}
size={30}
/>
)
: (<>
Theme:
<select
tw="border-gray-300 border rounded-md py-1 px-8 bg-backgroundSecondary text-primaryDark"
name="theme"
aria-label="Change color theme"
onChange={switchTheme}
value={theme}
>
{themes.map((t) => (
))}
<button
tw="rounded-xl bg-indigo-800 px-7 py-3 mx-3"
onClick={() => setDarkMode(!isDarkMode)}
>
Changing DarkModeSwitch's checked prop state doesn't change how it looks
</>
)
) }
export default ThemeChanger
