W3C home > Mailing lists > Public > public-css-archive@w3.org > September 2018

Re: [csswg-drafts] [mediaqueries-5] Dark Mode in CSS

From: adiabatic via GitHub <sysbot+gh@w3.org>
Date: Sun, 16 Sep 2018 22:41:52 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-421846510-1537137712-sysbot+gh@w3.org>
> I suspect that the current proposal might not offer the best we can because, if I understand correctly, we would leave the user with two bad choices:
> * […]
> * Use dark mode, and have nice designs for the OS and small number of websites, with the rest being mostly too bright.

I wouldn't underestimate the utility of this for people who visit a small number of websites for their workdays. If I could get _just_ GitHub to support dark mode that'd easily halve the amount of black-on-white I see. If MDN, developer.apple.com, MSDN, and Stack Overflow all followed suit, _lots_ of people wouldn't have to see much black-and-white at all.


I suppose one way of thinking about the utility of automatic inverted mode is "how much will it break your design if white is black, black is white, blue is orange, and orange is blue?" After a few minutes of fiddling with my iPad in inverted mode ("hey Siri, invert colors"), this is what I saw:

- Lots of formerly-blue buttons are now orange. Seems fine.
- Dark Sky has a blue sun. This sort of reversal is moderately confusing if you're running the app for the first time and all the time in inverted-colors mode, but generally fine.
- My monthly TextExpander report is mostly legible. Its logotype image isn't reversed (iOS is being smart about not reversing them). The images aren't so large that they defeat the purpose of inverted-colors-as-dark-mode, but I'm slightly worried that the now-brown text on a black background isn't high-contrast enough for people who need high-contrast text.
- Bob Ross's smile, in his Twitch avatar, is downright spooky coming from a blue man with white pupils.

My hunch is that the least bad solution for inverted-colors-as-ersatz-dark-mode will probably involve:

- automatically-reversed text and background colors
- OS/browser-based heuristics for when to reverse images (yes for light-yellow bamboo-forest backgrounds, no for logotypes)
- some sort of per-element override for the above heuristics because there's no way all browsers will be able to correctly guess this sort of thing all the time: `flip-colors-in-reversed-colors-mode: flip-colors | do-not-flip | flip-as-you-please | inherit…`\*.

Contra Krinkle, I think a per-element switch would be better than a per-site switch. I can imagine many hobbyist website authors who'd like to support dark mode if it merely involves choosing a second set of colors, but would rather use the browser's ability to reverse images' colors instead of having a second, dimmer version of every picture used.


\* Awful, verbose names chosen to avoid biasing readers towards names chosen without much thought put into them.

GitHub Notification of comment by adiabatic
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2735#issuecomment-421846510 using your GitHub account
Received on Sunday, 16 September 2018 22:41:59 UTC

This archive was generated by hypermail 2.3.1 : Sunday, 16 September 2018 22:42:02 UTC