Light/Dark Mode Favicon for React Sites

I have a Next.js (React) project where I wanted to adjust the favicon based on whether the current user is in dark or light mode.

Here’s a generic version of what I implemented. It is commented to add some context, and you can find additional context below the snippet.

import { useEffect, useState } from "react";
import { Helmet } from "react-helmet";

/**
 * Returns the path for a favicon based on the given color scheme.
 *
 * @param {boolean} isDarkMode If currently in dark mode
 */
const getFaviconPath = (isDarkMode = false) => {
  return `/favicon-${isDarkMode ? "dark" : "light"}.png`;
};

export default function MyApp() {
  const [faviconHref, setFaviconHref] = useState("/favicon-light.png");

  useEffect(() => {
    // Get current color scheme.
    const matcher = window.matchMedia("(prefers-color-scheme: dark)");
    // Set favicon initially.
    setFaviconHref(getFaviconPath(matcher.matches));
    // Change favicon if the color scheme changes.
    matcher.onchange = () => setFaviconHref(getFaviconPath(matcher.matches));
  }, [faviconHref]);

  return (
    <>
      <Helmet>
        <link rel="icon" href={faviconHref} />
        {/* Other meta tags ... */}
      </Helmet>

      {/* Page content ... */}
    </>
  );
}

Here are the key elements to note:

• The image files are favicon-light.png and favicon-dark.png, where the “dark” image applies to the dark mode.
• I am using the light mode icon as the default. This is because: 1) light is the default on most machines, and 2) browser support is limited and it’s the natural fallback. (More on this below.)
• useEffect is used to ensure that window is available. And it runs only when the component is mounted, updated, or is about to be unmounted. Learn more about the effect hook.

Here’s a demo of the result:

Limited Browser Support

The browser support for prefers-color-scheme is limited. This is why I mention using the light image as the default.

Some browsers have their own behavior. For example, Safari puts white box behind the icon when in dark mode so there’s no need to adjust.