(It doesn't seem to have occurred to that author to try reducing the brightness of the images, or reducing saturation with the saturate() instead of grayscale(), but those also seem worth trying, brightness in particular.)
Apple's Smart Invert is even simpler, it just leaves media like images and video as-is, only inverting colors of other things.
I suppose for diagrams that you know are black-on-white, inversion is nice, but it should be opt-in.
> Solution: filter: invert(1) hue-rotate(180deg);
This might be nominally acceptable, but it’s going to be pretty mediocre. Both of these methods dramatically distort color relationships from the original.
Getting someone to explicitly pick colors that work in dark mode will yield much better results. (Of course, takes a lot more manual work by an expert, instead of a few automatic text replacements.)
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.
Some people prefer dark mode because they suffer migraines and bright lights are a problem when they have a migraine. Or homeless people may be using it for both stealth purposes and battery conservation when they have limited opportunities to recharge.
For some people, this preference is not just some minor detail. It's a much more important thing than "I just happen to like dark color schemes."
Sorry, what? I feel like this is a very contrived reason to support dark mode in your interface, if it even helps…
created or arranged in a way that seems artificial and unrealistic. Synonym: forced
----
People can do anything they want with their websites. I'm not anyone who sets global policy on what your website should do.
But there's nothing contrived about the comment. It's an unplanned, spontaneous thought based on first-hand experience.
I spent nearly six years homeless. I'm quite open about that. I still blog about homelessness.
I spent a lot of time online while homeless. This was written about me:
IIRC, the two primary things we did to conserve battery power were 1. Avoid certain games and 2. Turn down screen brightness.
In ordinary usage, the screen on our tablets was typically the biggest drain on the battery. This was especially true for tablets with a large screen.
I don't have (anec)data specific to dark mode on websites and power usage. I just know that using our devices carefully was the difference being kept occupied for three or four hours until we could sleep or running out after an hour and having nothing to do but talk, which is not a stealthy activity.
That's really good info.
She spent her time on Twitter because it has a terrific dark mode. She couldn't get other things to work for her.
So people who are very photophobic are apparently not finding adequate accommodation for their needs. I poked around a bit after talking to her and confirmed that her criticisms were valid. The current available options don't work well for trying to surf the internet under such constraints.
I'm not advocating that anyone do anything in particular. I'm just talking about use cases I have a little knowledge of. That's it.
Because I do. And I'm someone who runs permanent dark mode via plugins in firefox due to eye strain/headaches. I don't expect the world to bend over backwards and I certainly don't expect people to recolour image backgrounds for me. The plugins do a good enough job.
You'd never define a particular color, just algorithms for taking some input color and deriving each needed color from that one.
Then the user can say: "I want this file in blue and this one in orange" and the syntax highlighting still calls out the features in a relative way but the absolute colors are used as cues for something else (like test coverage or something from source control).
Ok, maybe doing UI's would be fun after all.
This sucks when you want then share the diagram with someone, on certain platforms the diagram will be unreadable due to the lack of contrasting background.
* Some diagrams had white backgrounds
Solution: remove the backgrounds so they are transparent
* Most diagrams had black lines/arrows which didn't look good on dark gray backgrounds
Solution: use CSS filter:invert for images
* Some images are photos not diagrams so inverting their colors doesn't work
Solution: Use a selector for svg only img[src$=.svg] and a class when manually needed
* Some svg diagrams have their colors referred to like "see the red object" in that text.
Solution: filter: invert(1) hue-rotate(180deg);
That makes the blacks become white but the colors kind of stay the same hues at least
* The are many interactive digrams on the sites.
Solution: All of those had to be refactored to not use hard coded colors but do something like
And draw everything with the appropriate colors. Its up to you if you want to trigger re-drawing if the user changes their preference* Some text was color coded for to match the diagrams as in
But now those colors looked bad on a dark background.Even 5 months later I still find places I missed.