I found a "hack" for diagrams that need to work with both white and black backgrounds was to make all your lines gray. And then when you want vary the intensity of the line you adjust the opacity
It cuts your effective dynamic range in half, but works pretty well. And adjusting opacity is actually somewhat easier than adjusting color hex values
I haven't tried it with colors though - but I expect it'd work as well
In contrast, forcing a white background on people running dark mode is kinda ugly in my opinion as you end up with a border/cutout and it doesn't flow with the rest of the content as well
I am surprised they used a PNG for the preview instead of an SVG file. I know you can embed JavaScript in SVG files, I wonder if it could react to the `prefers-color-scheme` CSS feature of the page it's embedded in.
It cuts your effective dynamic range in half, but works pretty well. And adjusting opacity is actually somewhat easier than adjusting color hex values
I haven't tried it with colors though - but I expect it'd work as well
In contrast, forcing a white background on people running dark mode is kinda ugly in my opinion as you end up with a border/cutout and it doesn't flow with the rest of the content as well