Invert black/white on transparent PNGs / SVGs in dark mode.

[cnf]

Is your feature request related to a problem? Please describe. I have a lot of transparent images for categories and footprints. they are rather hard to see in dark mode.

example:

Describe the solution you'd like I was thinking adding a "monochrome" or "invertable" flag to the asset if it is transparent, and all assets that have that flag apply the css filter invert() if you are in dark mode.

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert

Alternatively, apply a background with an edge fade in or something to transparent images, so you get a nice background, and not a square blocky image.

This is mostly cosmetic, but I live in dark mode most of the time, and it would make a big difference for usability for me.

Thanks!

[d-buchmann]

I've had a similar issue in #242, but obviously this solution broke in v1.5.0. The css style used there was mix-blend-mode.

One issue is that if the picture is already bright, by inverting you will make it even less visible in dark mode. That makes things either less consistent or more complicated by requiring an additional logic for the "initial brightness".

However, it seems to me that the only consistent solution without favoring either dark or bright mode would be to put a white background on all images. This gives the most uniform result across all types of pictures (e.g. also those from info providers which mostly have plain white background already) and in both modes.

[cnf]

I can live with that :P as long as the images are legible.

Maybe add a bit of a fade near the edges, so it's not just a white square?