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

CAML Query Builder for SharePoint 2010

A useful tool for building CAML queries in Microsoft SharePoint 2010.

Nov 30, 2012

3 Tools to Validate Your Page's Meta Tags for Social Sharing

When you write an article or create any new webpage that is going to be shared across the web, it's important that you know how the preview of that new property is going to be displayed.

Dec 02, 2018

Delete Entire Word in Terminal and iTerm2

Ever find yourself holding down the Delete key on the command line? Here's a way to work faster.

Feb 08, 2021