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
@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. 🙂
@julian oh, dope! Thanks for the tip! I can add that to the post.

@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.