function Header() { const [ darkMode, setDarkMode ] = React.useState(false) React.useEffect(() => { const body = document.body const toggle = document.querySelector('.toggle-inner') // If dark mode is enabled - adds classes to update dark-mode styling. // Else, removes and styling is as normal. if( darkMode === true ) { body.classList.add('dark-mode') toggle.classList.add('toggle-active') } else { body.classList.remove('dark-mode') toggle.classList.remove('toggle-active') } }, [darkMode]) return (
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