SVG in night mode

Card Design
1

Hello everybody,

i’d like to know, if there’s a way to specifically invert the colors of *.svg files on a card? I like to use *.svg files the most for chemical structures and reactions, because, well it’s vector based, so small file size and incredible sharpness.

I’d normally export them with black lines, which works fine for the light mode, but in night oder dark mode, you obviously can’t see the black lines very well. For now, i have a note type, which inverts the colors of all images on cards if night mode is activated, but the problem there is, that it also inverts the colors of other images like *.jpgs. That means, if i want to have some biological picture or apparature setting or just anything else picture related, it get’s inverted too, which looks wrong.

I know, i can use two note types, but it is just a little hassle, and increase the chance of mistakenly using the wrong note type. Also, no svg and other pictures on one card :frowning:

So, if someone has an idea how to implement this, ideally in the card styling, that would be awesome.

Thx very much in advance.

2

There are a few ways to display a svg file in an HTML page, but if you are using an <img> tag like <img src="foo.svg">, try the following:

.nightMode img[src$=".svg"] {
    filter: invert(1);
}

For more information about CSS attribute selector, see here: Attribute selectors - CSS: Cascading Style Sheets | MDN

5 Likes
3

Thank you very much, it worked flawlessly! And thank you very much for the link, i will look further into it, when i run into similar problems.

1 Like
4

If you want more options beyond inversion of color, you could also replace the svg colors with variables, and assign those variables to different colors, separately, for day mode and night mode. This is what I use and it works perfectly.