Good question! I looked at the library that was recommended, and it seems it's mostly in case a user's browser doesn't support the prefers-color-scheme query
Freelance digital designer & web developer from the United Kingdom with over 10 years of experience. Admin at the webwide.io forums. Curates all the best web design & development tools at hoard.fyi.
Are there operating systems that have a dark mode with common browsers that don't have support for prefers-color-scheme? 🤔 Seems like it would be such a minority that it's not worth loading the JS for such a small enhancement. Only IE11 on Windows 10 it seems like.
As I've mentioned in my comment above - you don't have to go down the JS route.
However, the reason why I've chosen this way - is because the favicon automatically updates when you switch themes, which makes for a very good user interface.
It's your choice, but I'd prefer the three lines of code over messing with the SVG code 😅
favicon automatically updates when you switch themes
@johnletey, when you say this - does it mean the favicon updates without the user having to reload the page? If yes, then that would mean that it needs JavaScript to listen to theme change events. Genuinely curious.
Why is the JS necessary? Does the media query in the media attribute not respond to a changed user preference?
Good question! I looked at the library that was recommended, and it seems it's mostly in case a user's browser doesn't support the
prefers-color-scheme
querygithub.com/rumkin/favicon-switcher
Are there operating systems that have a dark mode with common browsers that don't have support for prefers-color-scheme? 🤔 Seems like it would be such a minority that it's not worth loading the JS for such a small enhancement. Only IE11 on Windows 10 it seems like.
As I've mentioned in my comment above - you don't have to go down the JS route.
However, the reason why I've chosen this way - is because the favicon automatically updates when you switch themes, which makes for a very good user interface.
It's your choice, but I'd prefer the three lines of code over messing with the SVG code 😅
I like that (media query embedded in the SVG CSS)
@johnletey, when you say this - does it mean the favicon updates without the user having to reload the page? If yes, then that would mean that it needs JavaScript to listen to theme change events. Genuinely curious.
I'm gonna prefix this with I don't think my way is the only way to do this.
This way works for me - and it's very simple.
As you've mentioned, you can just put the media tag inside the SVG code of your favicon.
But of what I've seen with this - it doesn't automatically switch, and you have to reload
The reason why I love this solution is because it's automatic as soon as you toggle themes.
If you are interested in going down the SVG route - I'd suggest you look here.