[mediaqueries-5] Clarification on prefers-color-scheme issues #3278
Whilst working on trying to implement this for Firefox I and @emilio noticed some ambiguity with the spec text.
Apple's implementation matches
I agree that's a bit weird for this query, because it isn't clear if no preference is explicit or not. But the no-preference value is supposed to be false. @xeenon has already fixed the bug in WebKit.
As for the other points:
Thanks @grorg, that all makes sense!
I (but note I'm not an expert in this area) personally think
I think I'd be confused as an author if that was not the case, but again I'm not author nor an expert in this area, so my opinion probably doesn't have that much value :-)
That seems to be my understanding of how this should work also. I think it is fair that Safari for example might decide never to match for
As for Firefox, for the short term
My views are:
Here are my thoughts from designer's perspective. I know there is a gray area regarding definition of
I the near future (I hope), there should be no distinction between light and dark theme, as there is no distinction between user's device screen size. We should only adapt the content and its visual properties to match user's device (whether it's a size or theme preference to something else) with media queries.
The thing is, you should only clearly define default design when there is no support for
Having the keywords being mutually exclusive makes sense to me as well. IIRC, in Mojave you cannot have no-preference. If that's the case, authors will probably not end up having three different designs, but have either the light or the dark being the default, like:
I have not checked with ChromeOS/Android if they will have a no-preference, but privacy/finger-printing was brought up as an issue on blink-dev (like mentioned above for Firefox as well).
I imagine this feature like this:
As a web developer...
...you are presented with 4 cases you might want to cover:
@media (prefers-color-scheme: dark)
If your app has a dark-mode, use it.
@media (prefers-color-scheme: light)
If your app has a light-mode, use it.
@media (prefers-color-scheme: no-preference)
Use whatever mode you, as a developer/designer, thought of as the more suited for your app.
Simply means that the webbrowser at hand supports communicating it's users color-scheme preference.
In a supporting webbrowser...
...I imagine there to be the following settings (maybe with per-domain overrides):
Forward the preferred color-scheme by the OS.
Let the website decide what is best.
Send "light" as your preference.
Send "dark" as your preference.
Remember, that you, as a developer, are always able to override the "prefers-color-scheme"-value.
This feature - at least in my eyes - is most useful to
a) get the fist time visitor directly into his favourite theme
So concrete questions:
The CSS Working Group just discussed
The full IRC log of that discussion<dael> Topic: Clarification on prefers-color-scheme issues
<dael> github: https://github.com//issues/3278
<Rossen> ah, misread the log...
<dael> emilio: Bascally, people are about to ship this MQ. There were unsolved issues. Should be straightforward
<dael> emilio: One is what should MQ evaluate in boolean context.
<dael> florian: It's defined in spec. If there's disagreement to what's defined I'm happy to hear it
<dael> emilio: Peoplediscussing on issue, but if spec says that's fine
<dael> florian: Same as no preference
<dael> dino: It makes using that form almost useless. You can't derrive meaning from it. If the query is prefers color scheme it will eval to true if they picked on
<dael> fantasai: Not prefers color scheme is interesting though. Makes it shorter to type out.
<dael> dino: You save 5 characters
<dael> TabAtkins: Prefers color scheme and not is clearly you either do or don't. It makes it this thing exists or doesn't and that's what null communicates
<AmeliaBR> `@media not (prefers-color-scheme)` and `@media (prefers-color-scheme: no-preference)` make sense as equivalents, to me.
<dael> emilio: Other question is if it should match light on print or if that's too smart
<dael> dino: That is another issue
<dael> astearns: I hadn't read the entire thread on #3278. Is that only what to do in boolean context?
<dael> emilio: Yeah
<dbaron> do existing implementations follow that answer?
<dael> astearns: Sounds like we have an answer. @media prefers-color-scheme is the same as null
<dael> astearns: It sounded like dino found it useless
<dbaron> (sorry, I can't unmute since the machine I'm dialed in on is semi-frozen thanks to yesterday's Windows update...)
<dael> dino: I don't know why you'd use it, but it does follow behavior so it's fine
<dael> TabAtkins: Yes, we're looking for consistency in how other MQs are handled
<dael> astearns: Prop: Close this issue no change, it is defined in spec. dbaron asked in IRC if impl match this
<dael> florian: I think we're light on tests
<dael> dino: We don' have any no-preference option
<dael> ??: I think blink is one that would have to change
<dael> emilio: Blink matches
<dael> dino: We should contribute tests for this. not sure how you can test user choice
<dael> florian: That's always the problem with testing MQs.
<dael> TabAtkins: Generally they're all manual tests. They're very hard
<dael> dino: Internally we have JS API only exposed in test system to set user preference for that page. Would be nice if al browsers could standardize on an API to do things like this. Would cover media style but nice if pointer events and touch events and that type of thing. Not for this WG I guess
<dael> astearns: Sounds like there's consensus to close this issue and take what's in the spec currently. Objections?
<dael> RESOLVED: Close this issue no change, there is already language in the spec
Hey, this sounds like a great idea! I'm forever clicking the "dark theme" button on websites, or finding a user style to provide one when the website doesn't support it.
As a user, I want to be able to choose whether I prefer a light or dark theme in my browser, rather than go hunting through my operating system's settings (which I've done, and I can't seem to find anything - I'm using Firefox with XFCE4 on Linux).
As the very least, I'd like a button that takes me to the right place in my desktop environment's settings.