Dark mode/light mode favicon not updating

Hey!

For me it seems to be working as expected:

Have you made any changes to the default auth package blade templates?

The implementation looks correct:

resources/views/includes/head.blade.php#L37-L38

- Bobby

After further testing, it seems the issue is isolated to the Firefox browser. Are you able to test it on your machine in Firefox? Does it work as expected?

Hey! 👋

Yea, seems like you're right. The favicon switching with media="(prefers-color-scheme: ...)" works nicely in Chrome, but as far as I can see Firefox doesn't support media queries on <link rel="icon">. It just grabs the first icon it sees and ignores the rest. 😬

No wonder Firefox is losing market share:

The chart says it all: only ~2.5% vs Chrome's ~70%! 😅

I've not tested it but you could try the following:

<link id="favicon" rel="icon" href="/light.ico" />
<script>
    const favicon = document.getElementById('favicon');
    const darkMode = window.matchMedia('(prefers-color-scheme: dark)');

    const updateFavicon = () => {
        favicon.href = darkMode.matches ? '/dark.ico' : '/light.ico';
    };

    darkMode.addEventListener('change', updateFavicon);
    updateFavicon();
</script>

- Bobby