Dark Mode in ReactJS - Kevin Uriel Fonseca

I have had this post as draft for about a whole month thinking on what to write but could not come with anything so here it is.

import { useEffect, useState } from 'react'

const ToggleTheme = () => {
  const [appearanceData, setAppearanceData] = useState({
    themeColor: 'ligth-mode',
  })

  let { themeColor } = appearanceData

  useEffect(() => {
    const newColor = localStorage.getItem('themeColor')
    if (newColor !== undefined && newColor !== null) {
      document.body.classList.add(newColor)
      setAppearanceData({
        themeColor: newColor,
      })
    }
  }, [])

  const toggleTheme = (color) => {
    if (color === 'dark-mode') {
      localStorage.setItem('themeColor', color)
      document.body.classList.remove(`ligth-mode`)
      document.body.classList.add(`${color}`)
      setAppearanceData({
        themeColor: color,
      })
    }
    if (color === 'ligth-mode') {
      localStorage.setItem('themeColor', color)
      document.body.classList.remove(`dark-mode`)
      document.body.classList.add(`${color}`)
      setAppearanceData({
        themeColor: color,
      })
    }
  }

  return (
    <span
      style={{ fontSize: '24px' }}
      onClick={() =>
        toggleTheme(themeColor === 'ligth-mode' ? 'dark-mode' : 'ligth-mode')
      }
    >
      {themeColor === `ligth-mode` ? <>🌞</> : <>🌕</>}
    </span>
  )
}

export default ToggleTheme

Bye bye 🙂

If you want to know more about Web Development with NodeJS, take a look into this book: