Reverting my darkmode favicon

prefers-color-scheme has nothing to do with a browser's chrome

Published

TL;DR

I simplified my favicon because the prefers-color-scheme media query detects a user's preference on an OS level - It is unaware of what color the browser chrome actually is.

If you set your OS preferences to dark, but your browser to light, you're gonna have a bad time.

Light browser, dark OS, invisible favicon
Light browser, dark OS, invisible favicon

What I originally had

When I initially redesigned my website I aimed to provide a better favicon system for light and dark mode users.

Github pulled it off pretty well and I figured out some ways to make it even easier via SVGs, but am now rethinking things.

Dark mode preferences are queried in CSS via prefers-color-scheme... Something like:

.favicon {
path {
fill: #000000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #ffffff;
}
}
}
scss

This is what I do in my favicon svg file. It works great as you can see from the the post about it.

Moving Forward

Old VS new favicon
Old VS new favicon

I don't love it quite as much, but it still gets the point across, and works regardless of color scheme preferenes or browser themes.