I finally added Darkmode to the site using React State & localStorage.

Features #

You can toggle darkmode by clicking the icon in the top menu.

Final Implementation #

I was going to use react context (Darkmode Using React Context) but after looking around I found a react component with a better darkmode implementation which uses addEventListener with useEffect to create an event listener & element.classList.add to change the className of the body element.

📦 use-dark-mode
📦 use-event-listener
📝 MDN addEventListener

I didn't like the default toggle switch style that comes with use-dark-mode so I created a custom component using simple sun & moon icons.

const ToggleDark = () => {
  const darkMode = useDarkMode(false)
  return (
    <div className="navbar-item dark-toggle">
      <button className="toggle-darkmode" onClick={darkMode.toggle} type="submit">
        {darkMode.value ? (
          <img src={sun} className="sun-icon" alt="sun-icon" />
        ) : (
          <img src={moon} className="moon-icon" alt="moon-icon" />

Firefox Developer Tools #

Firefox Page Inspector makes creating a darkmode style easy with the ability to view all changes you have made to a sites styles.

firefox inspector changes

It also has the ability to copy all changes making it easier to create a custom darkmode stylesheet.

📝 MDN Examine and edit CSS

Source Code #

The source for the site is available on github.