Post

QQ about Dark Mode Toggles on websites How many options do you show to users? - Three values: System, Light, or Dark - Two values: Light, Dark (with one of them mapping to “System” behind the scenes). Why the one or the other? (I have an opinion about it, but I’m looking for external input)

Three values, follow system is quite different intent wise from picking a specific theme. If my system automatically changes at night to dark mode I want that behaviour. But also I light want this specific site to always remain light mode.

as a developer, same. as a (tech savvy) user, i really just want browsers to easily let me override prefers-color-scheme on a per-website basis

Yup user agents should give users some agency.

What a wild concept

Blasphemous I know. But failing them giving the user an option they should give developers better primitives to implement it. Like say scripting control of preference media queries 😉.

Once browsers update the media query to reflect the page color-scheme, do you think there’s still a strong need to the User Preferences API? Toggling the color-scheme meta tag with JS will have a similar effect.

Because it breaks backward compatibility or are there additional reasons?

I don't think it materially helps authors much and we should probably be pushing people towards using -light-dark() instead. That way their components automatically adapt if a section of the page has an opposite color scheme.

Embedding dark sections in a light page or vice versa is relatively niche. I do prefer to use light-dark() but the media query is useful for setting values other than colors and images/gradients, particularly once the if() syntax ships.