Dark mode favicon (it's not that hard)

Hi Circle. It’s time to support dark mode favicons. It’s not that hard. Here’s some JavaScript to help you out… can put this at the bottom of the head element.

    <script>
        try {
            const faviconEl = document.createElement('link');
            faviconEl.setAttribute('rel', 'shortcut icon');

            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                faviconEl.setAttribute('href', 'PATH TO A WHITE/LIGHT ICON');
            } else {
                faviconEl.setAttribute('href', 'PATH TO A BLACK/DARK ICON');
            }

            document.getElementsByTagName('head')[0].appendChild(faviconEl);
        } catch (e) {
            console.error('Failed setting favicon.');
        }
    </script>
2 Likes

Thanks @y3sh, we merged a change to accommodate dark mode favicons today. Should be fixed for you.

1 Like

@Kate_Catlin yay! It’s the little wins. We can find our circle bookmarks in dark chrome now :smiley:

You guys are doing great exposing yourself to all the harsh feedback. Keep up the good work and the great design will emerge.

2 Likes

Appreciate you saying that @y3sh. I’ll pass that along to the team too.