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

Better Website Performance with Pixelated Placeholder Images

Page load times decrease as the number of images on a page increase. Learn the pixelated placeholder method that mitigates performance issues caused by images without negatively impacting user experience.

Jan 09, 2019

VS Code Spell Checker Not Working

Did your squigglies disappear?? Here's the most likely culprit.

Mar 02, 2021

Dynamic Routing in Middleman

Take Middleman's dynamic pages feature, combine it with data modeling, and voila! We have dynamic routing in Middleman.

May 04, 2018