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

Managing Money as a Freelancer

When you approach money management as a freelancer, especially a new freelancer, be scientific, conservative, and strict.

Feb 13, 2017

How to Model SEO Content for Websites

Give flexibility and control to web content editors by building smart content models for SEO meta tags.

May 15, 2022

Add Custom JavaScript and Stylesheets from SharePoint Master Page

You can add JavaScript and CSS files to your master page if you want to overwrite some default styles or add some functionality via a new script.

Aug 06, 2013