Home

Light/Dark Mode Favicon for React Sites

Toggle between two favicon images based on the user’s current theme (color scheme).

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.

Let's Connect

Keep Reading

Collaborate On A GitHub Gist

GitHub gists are designed to be user-specific and not for team collaboration. But you can make it work with a little finagling.

Apr 25, 2018

Connect to Multiple Databases in a Rake Task with Rails

Sometimes you need access to multiple database within a single rake task, for whatever reason. Here's how you do it.

Feb 17, 2015

Add Netlify Redirects and Headers to an Eleventy Project

What seems like a simple task can be a little tricky to get right with Eleventy. Learn how to add a _redirects file to Eleventy projects deployed with Netlify.

Sep 24, 2020