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