prefers-color-scheme has nothing to do with a browser's chrome
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.
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:
scss.favicon {path {fill: #000000;}@media (prefers-color-scheme: dark) {path {fill: #ffffff;}}}
This is what I do in my favicon svg file. It works great as you can see from the the post about it.
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.