Add support for CSS prefers-color-scheme media feature

NEW
Unassigned

Status

()

P3
normal
4 months ago
4 days ago

People

(Reporter: merihakar, Unassigned, Mentored)

Tracking

(Blocks: 3 bugs)

Trunk
x86_64
All
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox64 affected)

Details

Attachments

(1 attachment)

(Reporter)

Description

4 months ago
A new media query is added to CSS Media Queries Level 5 to utilize the dark mode preference operating systems provide.

https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
Blocks: 1434491
Priority: -- → P3
Status: UNCONFIRMED → NEW
Ever confirmed: true
https://paulmillr.com/posts/using-dark-mode-in-css/ is a post about implementation of this feature in Safari; https://webkit.org/blog/8475/release-notes-for-safari-technology-preview-68/ documents its addition.

I think if we implement this we may want to provide an hidden (about:config) preference to express a preference on platforms where the OS doesn't have one.
Bug 1466335 implemented a similar proprietary media query for Mac, bug 1368808 for Windows.

(In reply to David Baron :dbaron: 🇫🇷 ⌚UTC+2 from comment #1)
> https://paulmillr.com/posts/using-dark-mode-in-css/ is a post about
> implementation of this feature in Safari;
> https://webkit.org/blog/8475/release-notes-for-safari-technology-preview-68/
> documents its addition.
> 
> I think if we implement this we may want to provide an hidden (about:config)
> preference to express a preference on platforms where the OS doesn't have
> one.

I believe this also already works via ui.systemUsesDarkTheme.
Depends on: 1466335, 1368808
OS: Mac OS X → All
Summary: Add support for CSS prefers-color-scheme media feature for macOS → Add support for CSS prefers-color-scheme media feature
I was hacking this over my lunch and managed to get the following working:

* { background: yellow; } // Applies to anyone without the pref override

@media (prefers-color-scheme) {  // Applies to anyone with the pref override
  * { background: red; }
}

@media (prefers-color-scheme: dark) {  // Applies to anyone with the pref set to 1
  * { background: blue; }
}

@media (prefers-color-scheme: light) { // Applies to anyone with the pref set to 0
  * { background: pink; }
}

Is this the expected behavior?
Created attachment 9021821 [details]
Bug 1494034 - Intial work for adding prefer-dark-theme media query.
Comment on attachment 9021821 [details]
Bug 1494034 - Intial work for adding prefer-dark-theme media query.

With the right tests is this enough to get this supported? Should we not send the light mode ever?
Attachment #9021821 - Flags: feedback?(emilio)
Taking for now, I'm just working on this in my own time though.
Assignee: nobody → jkt
Comment on attachment 9021821 [details]
Bug 1494034 - Intial work for adding prefer-dark-theme media query.

It does look reasonable to me.

We don't have a `prefers-light-theme` thing, maybe `(prefers-color-scheme: light)` should always evaluate to false? Worth checking what other browsers do.

Similarly for what `(prefers-color-scheme)` evaluates to. The spec doesn't seem to mention anything. We should file a spec issue.

----

I just took a look at WebKit's source, and it doesn't make sense to me:

  http://webkit.crisal.io/webkit/rev/6e4aafe0e39c8d49ad33a31b9b22a2dd65192c25/Source/WebCore/css/MediaQueryEvaluator.cpp#731

The semantics WebKit implements looks wrong. Safari seems to evaluate '(prefers-color-scheme: no-preference)' to true all the time, regardless of the actual user preference.

Similarly it seems to implement light: !dark, which also seems slightly wrong.

Finally, Safari seems to flat out reject `(prefers-color-scheme)` at parse time. That is:

  matchMedia("(prefers-color-scheme)").media == "not all"

That seems unfortunate. We could implement such a thing adding another ParsingRequirements thing, but I think that always evaluating to false instead but parsing is better, since we need to eventually implement bug 1469173 which would end up with such behavior anyway.

In any case, we should:

 * Implement what WebKit implements and file spec issues, or:
 * Implement saner things and file spec issues and potentially file WebKit bugs, or:
 * Only file spec issues and hold off on the implementation.

I'd be ok with any of these, though I'd prefer (2) or (3), provided we send a PSA to dev-platform@ and people agree.
Attachment #9021821 - Flags: feedback?(emilio) → feedback+
I raised a spec issue for some clarification: https://github.com/w3c/csswg-drafts/issues/3278

I would like to see this tied to the dark/light theme if it makes sense to do so for non supporting systems.
Blocks: 1459504
Blocks: 1488384

Thinking aloud slightly, what should the media query match while printing? Light, because paper? Always false, because it's only meaningful on screens?

That's a good question. I think we shouldn't intermix the concept of printing and the user theme preference, but I could see the argument for the opposite.

Maybe worth filing an issue in https://github.com/w3c/csswg-drafts?

Also, Jonathan, are you actively working on this? Chromium is implemented, so it'd be great not to lag behind much given our spec questions were answered. Let me know if you want me (or someone else, quasicomputational? :)) to take over or what not (I'll make sure that the patch appears as co-authored by you of course).

Flags: needinfo?(jkt)

Went ahead and filed https://github.com/w3c/csswg-drafts/issues/3522.

I don't mind taking this on, but I do think there's still some spec work to be done. On the other hand, both Chromium and Safari are gearing up to ship, so who knows if that'll get done before the current version's ossified...

I don't have cycles to complete this right at the moment, so if people want to take it on that is fine with me :).

but I do think there's still some spec work to be done.

Yeah I was kinda waiting for this to resolve before working on this further.

Thanks!

Flags: needinfo?(jkt)

Ok, I'll clear the assignee for now :)

Assignee: jkt → nobody
Mentor: emilio
You need to log in before you can comment on or make changes to this bug.