[greggman2]

I recently added dark-mode support to a few sites. It took way more time then I thought it would. At first I thought "oh just add a few lines off CSS" but then ...

* 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

    const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)");
    const isDarkMode = darkMatcher.matches;
    const colors = isDarkMode ? darkColors : lightColors;

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

    <span style="color: red;">x-axis"</span>

But now those colors looked bad on a dark background.

Even 5 months later I still find places I missed.

[laughinghan]

You know the article addresses this exact problem? It links to another article focused on this problem, which suggests reducing the saturation of images: https://medium.com/dev-channel/re-colorization-for-dark-mode...

(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.

[quickthrower2]

Every time I think "oh just add a few lines off CSS" => 90% chance it'll take all day.

[mr_toad]

CSS needs an equivalent to an SQL query planner, so that mere humans can understand how it works.

[Vinnl]

The Firefox DevTools (currently in Nightly, soon in stable) have started at least telling you why a certain selector does not apply, which sounds incredibly helpful: https://twitter.com/FirefoxDevTools/status/11747010367930327...

[jacobolus]

> Solution: use CSS filter:invert for images

> 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.)

[greggman2]

A agree 100% but didn't want to have to manually remake 150+ diagrams

[chadlavi]

Why mess with content colors? Just leave the images.

[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

[DoreenMichele]

If you have a lot of images with white backgrounds, that's going to defeat the purpose of Dark Mode.

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."

[saagarjha]

> Or homeless people may be using it for both stealth purposes and battery conservation when they have limited opportunities to recharge.

Sorry, what? I feel like this is a very contrived reason to support dark mode in your interface, if it even helps…

[DoreenMichele]

Contrived: deliberately created rather than arising naturally or spontaneously. Synonym: deliberate

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:

http://alexandralindelof.com/story-package/

[saagarjha]

I'm aware of that, but images on a website being desaturated or having a dark background doesn't seem like it would help. (I do agree with your appeal to those who are sensitive to bright lights, FWIW. It's just that this one sounds like a bit of a reach.)

[DoreenMichele]

If you are illegally camped in a dark field and your phone, tablet or laptop is the only source of light, bright white images emit much more light that can give away your position than dark ones.

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.

[danjac]

What about browser addons like Dark Reader? Would that make more sense than relying on thousands of sites to have a reliable dark mode (when the vast majority won't support any kind of dark mode anyway)?

[DoreenMichele]

I was internet acquainted for a time with someone suffering chronic migraines. She said she could not do anything with browsers most of the time and switching her phone to dark mode was a problem because it just flipped the colors for everything.

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.

[danjac]

Sure. I'm wondering whether something like Dark Reader - i.e. an addon or even as a standard browser feature - might be more helpful to people who genuinely need dark mode everywhere, rather than trying to persuade thousands of site owners and designers to individually provide some kind of dark styling (and as is apparent in the thread, not doing so perfectly, e.g. with images).

[dageshi]

Do you not think maybe that people with migranes and homeless people conserving battery might be edge cases just a little bit too far to worry about?

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.

[DoreenMichele]

In the U.S., more than 38 million people have migraine disease, with some estimates suggesting that this number may be even higher, impacting as many as 50 million or more. Some migraine studies estimate that 12 percent of adults in the U.S. population have migraine, and 4 million have chronic migraine.

https://migraine.com/migraine-statistics/

[__MatrixMan__]

Your comment makes me glad I don't do UI's. But then I'm reminded of a syntax highlighting scheme I wish existed:

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.

[andy_ppp]

The problem is our brains represent colour in a very weird way and the algorithms I’ve seen for this always look horrible. I guess maybe training a neural net on this might make the results more human!

[tripzilch]

No, what really helps is picking the right colour space to work in. Which is probably CIE-LAB, being constructed especially for the weird way our brains perceive colour, but still also works mostly correct if you treat it as a linear space.

[p7IDD243]

>Solution: remove the backgrounds so they are transparent

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.

[rangibaby]

It’s easier to add a background later than remove one after, so I think transparent bg is a good solution