Micah IlberyJun 30, 2023
Cassidy James   

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
Jun 30, 2023 at 5:57pmWeb
Show threadJulian FietkauJun 30, 2023
@cassidy Using both "color" and "fill" like you suggest is a valid strategy. But if it feels too redundant, something else you can do is put "svg { fill: currentColor; }" in your stylesheet and it'll pull whatever the current foreground color is into the fill attribute for your SVGs. 🙂
Show threadCassidy James   Jun 30, 2023
@julian oh, dope! Thanks for the tip! I can add that to the post.
Show threadVesa PiittinenJun 30, 2023

@cassidy @julian You can also put `fill="currentColor"` right into SVG itself, or even `fill="var(--icon-color,currentColor)"` which allows setting icon colors per local theme context.

Another trick that I've been moving to is to place SVGs to CSS variables, and then use them via CSS masks. This allows use in pseudo elements. Mask is good as it allows you to have background color in currentColor. There is one gotcha: if you transition you need to have transparent border of ~ 2px to avoid leaks.

Show threadMicah IlberyJun 30, 2023
@cassidy @jimmac I’ve been doing this for the last few versions of my website. It’s such a neat trick. As others have mentioned currentColor also works in SVGs. That’s the default for all the icons I’ve made for the web. Another fun SVG thing is giving IDs to each path and setting the fill and stroke for each path in the media queries or in the css. It allows for some fun multi color icons.
Show threadrazzeJun 30, 2023
@cassidy @jimmac be aware, that this doesn't work for some browsers
Show threadCassidy James   Jun 30, 2023
@razze @jimmac I mention it in the post, but from looking at CanIUse, support is pretty wide these days
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
Show threadAmadeus MaximilianJun 30, 2023

@cassidy SVGs are just awesome like that. 😊

I've started writing little plugins that automatically turn a folder of SVGs into a sprite that then gets inclined into my website. That way I have the convenience of just uploading a newly drawn icon with the benefit of being able to style them via CSS. 👌

And SVG favicons are just awesome. 😊 I love the modern web. 😁