Poll: SVG Images with a Dark Mode Switch?

[Alexander Halser]

Love it or hate it, dark mode isn’t going anywhere.

SnipSVG supports dark mode—and so does Help+Manual. Our website is fully dark-mode ready, and we’ve even published a comprehensive guide to accessible HTML that covers dark mode as well (https://www.helpandmanual.com/news/2024 ... ible-html/).

Where things usually get tricky? Images. Especially icons.
In dark mode HTML, they’re often the biggest headache, because they typically require separate versions.

That’s where SnipSVG shines. As a dedicated SVG expert tool, it could give you everything you need to create screenshots and icons that adapt automatically. One SVG. Dynamic colors. Seamless switching based on the user’s preferences—no extra image sets required. How about that?
I look forward to reading your comments!

svg-light-dark.png

[Stewart Edgell]

I tried to create a SVG with dynamic colors but could not work out how to do so. I found I could create light text on a dark background or dark text on a light background but I could not get the text switching automatically with the theme. I know this can be achieved by adding CSS manually to a SVG. I would be grateful if you could provide more details of automatic switching - I could not find anything about this in the help.

[Alexander Halser]

Hello Stewart,
This is a poll. Light/dark mode is not implemented in SnipSVG, at least not yet.

To make this work, you'd have to manually edit the SVG files, add custom CSS, assign class names to the elements that should appear dynamic and remove the hard-coded fill and line colors. This is quite an undertaking for a single SVG file, especially if you want the text to change colors as well.

[Stewart Edgell]

Thanks for your very informative reply and yes, I must read the topic title more carefully