Support the color-scheme meta tag
Categories
(Core :: Layout, enhancement, P3)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox95 | --- | fixed |
People
(Reporter: svoisen, Assigned: emilio)
References
(Blocks 1 open bug, )
Details
(Keywords: dev-doc-complete)
Attachments
(4 files, 2 obsolete files)
See the proposal: https://github.com/w3c/csswg-drafts/issues/3299
This meta tag allows sites to say they fully support a dark or light theme such that the browser can load an entirely different UA stylesheet (to style widgets, etc. that match a theme), thus avoiding "flashes" of content styled with the wrong theme. It is intended to be used in conjunction with the prefers-color-scheme media query.
This could also be used to allow Firefox to "apply automatic presentational transformations to web content (auto-darkening, or conversion into a high-contrast mode)" based on the user's preferred color scheme.
|
Reporter | |
Updated•5 years ago
|
|
||
Comment 1•5 years ago
|
||
CSS Color Adjust Module Level 1
Section 2.3. The "color-scheme" meta value
https://drafts.csswg.org/css-color-adjust-1/#color-scheme-meta
As reflected in above, the initialially proposed meta name="supported-color-schemes"
has been renamed meta name="color-scheme" <-- note it is singular, not plural.
|
||
Comment 2•5 years ago
|
||
Updated the bug summary to match current spec
|
||
Updated•5 years ago
|
|
||
Comment 4•4 years ago
|
||
Please note https://bugzilla.mozilla.org/show_bug.cgi?id=1626560 that we also just discovered in Chrome.
Since this probably requires changes to the user agent stylesheets, it would be great to agree on a cross-browser set of dark scheme default link colors.
| Comment hidden (advocacy) |
| Comment hidden (advocacy) |
|
||
Comment 7•3 years ago
|
||
Tentatively taking this. I'm not starting on it right away, but I'll probably dive into this within a month or so.
|
|
||
Updated•3 years ago
|
|
||
Updated•3 years ago
|
|
Assignee | |
Comment 8•3 years ago
|
||
Stealing as per off-bugzilla discussion with Daniel :)
|
|
Assignee | |
Comment 9•3 years ago
|
||
There are still tests failing because
https://bugzilla.mozilla.org/show_bug.cgi?id=1736034 hasn't been synced
yet.
Once that lands, they will still fail because we don't change
Canvas/CanvasText based on color-scheme, but that I'm attaching
patches for after this one.
|
|
Assignee | |
Comment 10•3 years ago
|
||
This doesn't change behavior but will allow us to deduplicate some
logic given we compute the effective color-scheme in C++.
Depends on D129741
|
|
Assignee | |
Comment 11•3 years ago
|
||
There are still tests failing because
https://bugzilla.mozilla.org/show_bug.cgi?id=1736034 hasn't been synced
yet.
Once that lands, they will still fail because we don't change
Canvas/CanvasText based on color-scheme, but that I'm attaching
patches for after this one.
|
|
Assignee | |
Comment 12•3 years ago
|
||
This doesn't change behavior but will allow us to deduplicate some
logic given we compute the effective color-scheme in C++.
Depends on D129743
|
|
Assignee | |
Comment 13•3 years ago
|
||
No behavior change.
Depends on D129744
|
|
Assignee | |
Comment 14•3 years ago
|
||
For that, add .dark version of the browser.display* prefs that control
the light version of these colors.
The default for background/foreground colors are taken from the
GenericDarkColors used in LookAndFeel.
The defaults for links are based on this discussion:
https://github.com/whatwg/html/issues/5426#issuecomment-904021675
(So they effectively match Chrome).
Whether the dark colors should be exposed in about:preferences like the
light colors are is TBD.
With this patch, we pass all the tests in:
https://wpt.live/html/semantics/document-metadata/the-meta-element/color-scheme/
However they're not properly synced yet per:
https://bugzilla.mozilla.org/show_bug.cgi?id=1736034
Use the colors to paint the default canvas background and the default
colors.
There are three "regressions", though they are really progressions: we
now render the reference as the test expects (before we rendered a light
canvas background even for the reference).
Apart of these iframe tests (which we should look into), there are three
remaining test failures.
Two of them are due to color: initial not changing based on the
color-scheme. Safari also fails these tests, and the thing they're
really testing is whether system colors are preserved at computed-value
time:
https://github.com/w3c/csswg-drafts/issues/3847
Regarding that change, I'm not so sure the trade-offs there are worth
it, as that not only complicates interpolation (we wouldn't be able to
use system colors in color-mix among others, see
https://github.com/w3c/csswg-drafts/issues/5780) plus it changes
inheritance behavior in sorta unexpected ways, see:
https://github.com/w3c/csswg-drafts/issues/6773
Which I just filed because apparently no browser implements this
correctly. So for now will punt on those (keep matching Safari).
There's an svg-as-image test:
Which isn't using the feature at all and I'm not sure why is it supposed
to pass (why prefers-color-scheme: dark is supposed to match that SVG
image). This test fails in all browsers apparently:
I sent https://github.com/web-platform-tests/wpt/pull/31407 to remove
it and hopefully get it reviewed by some Chromium folks.
Depends on D129745
|
||
Updated•3 years ago
|
|
|
||
Updated•3 years ago
|
|
||
Comment 15•3 years ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/6caecb555bdf Implement <meta name=color-scheme>. r=dholbert https://hg.mozilla.org/integration/autoland/rev/7a440f77a950 Move Canvas/Link color computation to C++-land. r=dholbert https://hg.mozilla.org/integration/autoland/rev/b344eed54a03 Move mozilla::ColorScheme definition to its own header. r=dholbert https://hg.mozilla.org/integration/autoland/rev/48bb39e937c5 Make Canvas/CanvasText and Link colors color-scheme-aware. r=dholbert
|
||
Comment 16•3 years ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/6caecb555bdf
https://hg.mozilla.org/mozilla-central/rev/7a440f77a950
https://hg.mozilla.org/mozilla-central/rev/b344eed54a03
https://hg.mozilla.org/mozilla-central/rev/48bb39e937c5
|
||
Comment 17•2 years ago
|
||
Is there a bug to follow for this making it to release? A search didn't turn anything up.
|
|
||
Comment 18•2 years ago
•
|
||
That's bug 1576289, and emilio landed a patch there a few weeks back. So, if there aren't any issues, this will ship in Firefox 96.
|
||
Comment 19•2 years ago
|
||
Possible regression https://bugzilla.mozilla.org/show_bug.cgi?id=1744749
|
||
Updated•2 years ago
|
Description
•