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 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   
@julian oh, dope! Thanks for the tip! I can add that to the post.
Jun 30, 2023 at 6:08pmWeb
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.