Cassidy James   Jun 30, 2023

Much shorter little blog post today: recoloring SVGs on the web. Thanks to @jimmac and @razze, I learned you can include prefers-color-scheme support directly in an SVG used as a favicon! 🤯

https://cassidyjames.com/blog/prefers-color-scheme-svg-light-dark/

✨ As a reminder, publicly replying to this post will add your reply as a comment on the blog post.

#CSS #WebDesign #design #WebDevelopment

Give your SVGs light/dark style support

prefers-color-scheme and media queries are magic

Cassidy James Blaede
Show threadrazzeJun 30, 2023
@cassidy @jimmac be aware, that this doesn't work for some browsers
Show threadCassidy James   
@razze @jimmac I mention it in the post, but from looking at CanIUse, support is pretty wide these days
Jun 30, 2023 at 8:24pmWeb
Show threadJakub Steiner ⭐Jun 30, 2023
@cassidy @razze Razze deserves all the credit. I was unaware of the way he approached it.
Show threadCassidy James   Jun 30, 2023
@jimmac @razze ah, I see!
Show threadrazzeJul 2, 2023
@cassidy @jimmac I think it's only gnome web and maybe apple browsers then?
See https://github.com/flathub/website/pull/1109
Dark mode-friendly favicon by akatiggerx04 · Pull Request #1109 · flathub/website

I updated the favicon and added support for dark mode. The new icon will appear white in dark mode and black in light mode, making it more visible in the tab bar. The implementation of dark mode su...

GitHub