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

Adding and removing an icon from the document’s head works in Firefox but not Safari:

• Demo: https://zesty-soybean.glitch.me/
• Source: https://glitch.com/edit/#!/zesty-soybean

Chrome is still implementing (prefers-color-scheme: dark), so the jury’s still out. https://crbug.com/889087. In Chrome 76 with --enable-blink-features=MediaQueryPrefersColorScheme, this correctly sets the icon when the page is loaded, but does not respond dynamically to changes in dark mode.

Safari adds a grey background to dark icons in dark mode (for example, Wikimedia Foundation, Github), so this workaround isn’t necessary for legibility.

1. Add two link rel=icon elements with ids for later:

   <link rel="icon" href="https://stackoverflow.com/questions/55170708/a.png" id="light-scheme-icon">
   <link rel="icon" href="b.png" id="dark-scheme-icon">
   

2. Create a CSS media matcher:

   matcher = window.matchMedia('(prefers-color-scheme: dark)');
   matcher.addListener(onUpdate);
   onUpdate();
   

3. Add/remove the elements from the document’s head:

   lightSchemeIcon = document.querySelector('link#light-scheme-icon');
   darkSchemeIcon = document.querySelector('link#dark-scheme-icon');
   
   function onUpdate() {
     if (matcher.matches) {
       lightSchemeIcon.remove();
       document.head.append(darkSchemeIcon);
     } else {
       document.head.append(lightSchemeIcon);
       darkSchemeIcon.remove();
     }
   }