6 ms·
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
by greggman2 7y ago
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.
- chadlavi 7y agoWhy mess with content colors? Just leave the images.
- jgtrosh 7y agoThe 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 agoThe 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 agothat 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 agoI 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 agoI 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.
- 7y ago
- DoreenMichele 7y agoIf 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."
- dageshi 7y agoDo 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 7y agoIn 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/ https://migraine.com/migraine-statistics/
- saagarjha 7y ago> 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 7y agoContrived: 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/ http://alexandralindelof.com/story-package/
- p7IDD243 7y ago>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 7y agoIt’s easier to add a background later than remove one after, so I think transparent bg is a good solution
- laughinghan 7y agoYou 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-19e2e17b584b 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 7y agoEvery time I think "oh just add a few lines off CSS" => 90% chance it'll take all day.
- mr_toad 7y agoCSS needs an equivalent to an SQL query planner, so that mere humans can understand how it works.
- Vinnl 7y agoThe 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/1174701036793032704 https://twitter.com/FirefoxDevTools/status/11747010367930327...
- jacobolus 7y ago> 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 7y agoA agree 100% but didn't want to have to manually remake 150+ diagrams
- __MatrixMan__ 7y agoYour 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 7y agoThe 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 7y agoNo, 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.