Added Darkmode To Site

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

Features #

• Supports prefers-color-scheme
• Fades to Black
• Simple Sun / Moon Icon
• Uses localStorage
• Uses React Hooks
• Uses React State

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" />
        )}
      </button>
    </div>
  )
}

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.

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.

equk-gatsby