Preview:
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 (
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