Simple React Dark Mode.

PHOTO EMBED

Thu May 05 2022 07:27:28 GMT+0000 (UTC)

Saved by @Jude∗ #undefined

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 (
content_copyCOPY

https://codepen.io/ryanjg4/pen/RwwaMdX