netlistsvg

netlistsvg copied to clipboard

I was browsing a repository that uses a file from this repository in its readme.

As I use a dark mode on github, it displayed the schematic as black-on-dark-background, making it almost unreadable. This repository has the same issue.

Playing around with different options, I suggest adding css media queries to the generated svg files and skins:

@media (prefers-color-scheme: dark) {
svg {stroke: #ccc;}
text {fill: #ccc;}
.splitjoinBody {fill: #ccc;}
.detail {fill: #ccc;}
}

When the browser is set to a dark theme, the circuit color will be changed to white.

As a possible drawback, graphics may appear white-on-white on websites that still use a white background despite the user preference. As this is not the case on GitHub, this should probably be the default, at least for examples in this repository. An alternative I considered was to use mix-blend-mode and background-blend-mode, as well as svg filters, to try to mix/invert background colors, but I didn't have much success.

This is the temporary fix I use in my Makefiles:

%.netlistsvg.svg: %.json
	netlistsvg $< -o $@
	sed -i -E 's@(<svg[^>]*>)@\1<rect width="100%" height="100%" fill="white"/>@g' "$@"