Detect if the browser is using dark mode and use a different favicon

Question

Google Chrome 73 has been released, and it adds \"dark mode\" support to the browser. I notice that a lot of favicons look bad now.

Is there a way to d

Answer 1

The easiest option is to change the source when you change the mode on your computer.

var element = document.querySelector("link[rel='icon']");
const darkModeListener = (event) => {
if (event.matches) {
  console.log("dark");
  element.setAttribute("href","img/favicon-dark.svg");
} else {
  console.log("light");
  element.setAttribute("href","img/favicon-light.svg");
}
};

// Update favicon on Mode change 
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', darkModeListener);

// Check Mode on load
if (window.matchMedia && window.matchMedia('(prefers-color-scheme:      dark)').matches) {
  element.setAttribute("href","img/favicon-dark.svg");
} else {
  element.setAttribute("href","img/favicon-light.svg");
}
 

But if you have a multi-device favicon then you need to do something like this ...

// Switch Favicon on Dark/Light Mode
        let colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: dark)');
            const setColorScheme = e => {
              if (e.matches) {
                // Dark
                var favicon = document.querySelectorAll('link[data-type="favicon"]');
                var i = favicon.length;
                while (i--) {              
                  favicon[i].setAttribute('href', favicon[i].dataset.dark);
                }
              } else {
                // Light
                var favicon = document.querySelectorAll('link[data-type="favicon"]');
                var i = favicon.length;
                while (i--) {              
                  favicon[i].setAttribute("href", favicon[i].dataset.light);
                }
              }
            }
           
           setColorScheme(colorSchemeQueryList);
           colorSchemeQueryList.addListener(setColorScheme);