Code to change favicons depending on a users scheme preference.

faviconScheme.coffee

# Credit: https://stackoverflow.com/a/55252008/1544937

lightSchemeIcon = document.querySelector "link#light-scheme-icon"
darkSchemeIcon = document.querySelector "link#dark-scheme-icon"

schemeMatcher = window.matchMedia "(prefers-color-scheme: light)"

schemeUpdate = ->

    if schemeMatcher.matches

        document.head.append lightSchemeIcon
        darkSchemeIcon.remove()
        window.scheme = "light"

    else

        document.head.append darkSchemeIcon
        lightSchemeIcon.remove()
        window.scheme = "dark"

schemeMatcher.addListener schemeUpdate

schemeUpdate()

faviconScheme.js

// Credit: https://stackoverflow.com/a/55252008/1544937

var darkSchemeIcon, lightSchemeIcon, schemeMatcher, schemeUpdate;

lightSchemeIcon = document.querySelector("link#light-scheme-icon");

darkSchemeIcon = document.querySelector("link#dark-scheme-icon");

schemeMatcher = window.matchMedia("(prefers-color-scheme: light)");

schemeUpdate = function() {
  if (schemeMatcher.matches) {
    document.head.append(lightSchemeIcon);
    darkSchemeIcon.remove();
    return window.scheme = "light";
  } else {
    document.head.append(darkSchemeIcon);
    lightSchemeIcon.remove();
    return window.scheme = "dark";
  }
};

schemeMatcher.addListener(schemeUpdate);

schemeUpdate();