Documentation is unreadable if the system theme is dark about yosys HOT 5 CLOSED

On my personal blog I'm handling diagrams with some CSS that inverts the brightness but keeps the hues roughly the same, might be useful here too:

filter: url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg'><filter id='f'><feColorMatrix color-interpolation-filters='sRGB' type='matrix' values='1.47 -1.73 -0.467 0 0.867 -0.733 0.467 -0.467 0 0.867 -0.667 -1.07 1.07 0 0.867 0 0 0 1.0 0'></feColorMatrix></filter></svg>#f");

The color-interpolation-filters='sRGB' is needed to get consistent behavior across browsers even though it's arguably wrong. The exact transformation matrix also depends on the foreground and background colors used in the theme (mostly because mapping #000 in diagrams made for light themes to #fff in dark themes is too bright and it should be mapped to the body text color instead).

from yosys.

Oh, that's way more advanced than what I did! Very clever. How's the performance like?

from yosys.

I haven't noticed any negative performance impact of this, including on mobile browsers, but my blog also isn't the most demanding page in general. AFAICT from chrome's rendering dev tools the SVGs are still rendered once (with the filter applied) into tiles/layers shared with the surrounding content, so unless it's used for animated or otherwise dynamic content I wouldn't expect this to have a significant impact on performance. I didn't find a way to easily check how Firefox behaves here.

from yosys.

I also found the python script I used to compute the matrix coefficients: invert_filter.py. Lines 13 to 17 contain the foreground and background colors for both themes and lines 19 to 23 are used to constrain the remaining degrees of freedom and I played around with those until it looked good to me.

from yosys.

Took a bit to figure out how to get it to work with the dark/light mode switcher but it even works for the TeX generated graphics. PR soon to follow.

from yosys.