Dark mode - prefers-color-scheme

[mgifford]

I just wanted to open this to make it easier to discuss this (not for consideration for 2.2 obviously).

As folks are aware, browsers on some operating systems are starting to expose this information to websites. I would like to suggest that respecting user choices (such as dark mode) should be at least an AAA.

Yes, there are folks who just think it is "cool" to use dark mode, but there are also people who need it to allow them to see the text effectively, avoid getting headaches or simply allow them to focus.

[patrickhlauke]

agree that a AAA "respect user settings/preferences" in general would be quite useful, which can then include various more specific things (in understanding, so that it doesn't get too tech-specific as these preferences available in browser / related CSS and JS hooks to detect them are likely to change over time to include more/more precise options).

in general, this could include things like dark mode, preference for reduced motion, high contrast scheme ...

just on the topic of dark mode, take it with a pinch of usual salt, but came across this recently https://www.nngroup.com/articles/dark-mode/ (tl;dr: some evidence that dark mode was better for certain users with cloudy ocular media, but apparently no impact - for the things that were measured in the study - overall ... but of course that depends how those studies were conducted / if what they tested is actually relevant / etc)

[JAWS-test]

I would like to suggest that respecting user choices (such as dark mode) should be at least an AAA.

What does "respecting" mean in this context? The pages are not automatically adjusted in dark mode. This means that the dark mode can be queried with a media query. And what should happen then: Should the pages be displayed inverted? What about pages that are already displayed in light mode with black background and light font?

[patrickhlauke]

"respecting" here means "taking the cue from the user's preference request and actually doing something about it". yes, it's not automatically done, and the ask here is that authors actively do/provide the changes based on the preferences.

interestingly though, if the site is already designed by default to be "dark", then arguably it's not respecting the user's desire if they have set their environment to prefer prefers-color-scheme: light. there's an underlying assumption here that light is usually the default, and that dark is the adaptation. if we're really talking about respecting user preferences, both will likely need to be taken into consideration.

[mgifford]

Good point about prefers-color-scheme: light @patrickhlauke - ultimately this is about giving users choice. Hopefully there will be broader range of choices which users can select from.

I was discussing this with the Preferences Editor folks a while ago https://build.fluidproject.org/infusion/demos/uiOptions/

Other things to consider:

• normal & dark mode can be set to shift with the time of day, so in a single user session the browser preferences may change without the user doing anything.
• If there is a dark mode widget on the site to switch between the normal / dark settings, the widget choices should take preference over the browser preferences. That said how do you indicate when there is a difference?

[JAWS-test]

It should be noted that browser support for prefers-color-scheme is not good and not consistent:

Does not work in IE 11. Works differently in Chrome, Firefox, Edge:

• Edge: always "light" (also in Dark Mode), "dark" only with HCM white-on-black
• Firefox: always "light" (also in HCM), "dark" only with Dark Mode
• Chrome: "light" in the standard view and HCM black-on-white / "dark" with Dark Mode and HCM white-on-black / "no-preference" with all others HCM modes
• iPhone with Safari: "light" in standard view and "dark" in Dark Mode
• Android with Chrome: always "light" (also in Dark Mode)

See https://codepen.io/jaws-test/pen/WNvYOdm

[patrickhlauke]

i'd be careful not to conflate/confused light/dark mode and HCM. they're two distinct things (though yes there can/will be correlations).

and yes browser support/implementation is young and inconsistent, so this will need to be seen in light of "in environments/user agents that support this..."

[JAWS-test]

I am aware that HCM and Dark Mode are different things. I only checked HCM together with prefers-color-scheme, because I noticed that some browsers interpret HCM as Dark Mode (Chrome, Edge)

[JAWS-test]

because I noticed that some browsers interpret HCM as Dark Mode (Chrome, Edge)

which tends to be right: "Additionally, if the UA determines, based on Lab lightness, that the Canvas color is clearly either dark (L < 33%) or light (L > 67%), then it must match the appropriate value of the prefers-color-scheme media query and express a corresponding user preference for color-scheme. This will allow pages that support light/dark color schemes to automatically adjust to more closely match the forced color scheme." https://www.w3.org/TR/css-color-adjust-1/#forced