import { useTheme } from 'next-themes' const ThemeChanger = () => { const [mounted, setMounted] = useState(false) const { theme, setTheme } = useTheme() // When mounted on client, now we can show the UI useEffect(() => setMounted(true), []) if (!mounted) return null return ( <div> The current theme is: {theme} <button onClick={() => setTheme('light')}>Light Mode</button> <button onClick={() => setTheme('dark')}>Dark Mode</button> </div> ) }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter