[jgtrosh]

The problem is very simple: if you have diagrams with black lines on transparent background it doesn't work with dark background. Many colour choices we do make less sense for dark backgrounds than for light ones. The comment above properly describes the breadth of real problems you might face.

[baroffoos]

The easy option is to just put a white background behind the diagrams. It might not be as pretty as having the image designed right for a black background but its better than that hack.

[greggman2]

I would have thought so to but looking at the white background digrams on the dark pages was a horrible experience. It pretty much defeated the entire purpose of having a dark mode as there was these bright white diagrams shining in my eyes.

Which is better you can compare

Here's before dark mode

https://codepen.io/greggman/full/vYYOxjd

Here's leaving the backgrounds to the diagrams white

https://codepen.io/greggman/full/zYYGZWB

And here's the hue rotated solution

https://codepen.io/greggman/full/abbOJYB

The ideal solution would be to make all the diagrams twice but that's a ton of work if your site has lots of diagrams. Of course it's all an opinion. I don't have time to redo all the diagrams or go make them CSS styled indivdually so this is the solution I chose for now.

[jgtrosh]

Yeah, the hue rotation is really nice. Do you have a real example where it doesn't work?

[the8472]

that can be like a lighthouse in a dark night. flux can help of course, but if you are serious about supporting dark mode then you should eliminate as much white space as managable.

[anfedorov]

I think he means if you're serious about dark mode then design two graphs one light, one dark. Solving "how do I turn a well designed light mode image into a dark mode image" is an AI task that would be a nice research paper, not something a designer can hack together with a bunch of if-then rules.

[seansta]

+1