Mastodawn

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 thread

Micah Ilbery

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