4 ms·

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

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 7y ago
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.
- the8472 7y ago
  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 7y ago
    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 7y ago
  +1
- greggman2 7y ago
  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 https://codepen.io/greggman/full/vYYOxjd Here's leaving the backgrounds to the diagrams white https://codepen.io/greggman/full/zYYGZWB https://codepen.io/greggman/full/zYYGZWB And here's the hue rotated solution https://codepen.io/greggman/full/abbOJYB 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 7y ago
    Yeah, the hue rotation is really nice. Do you have a real example where it doesn't work?

baroffoos 7y ago

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.

the8472 7y ago
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 7y ago
  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 7y ago
+1
greggman2 7y ago
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 https://codepen.io/greggman/full/vYYOxjd Here's leaving the backgrounds to the diagrams white https://codepen.io/greggman/full/zYYGZWB https://codepen.io/greggman/full/zYYGZWB And here's the hue rotated solution https://codepen.io/greggman/full/abbOJYB 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 7y ago
  Yeah, the hue rotation is really nice. Do you have a real example where it doesn't work?