Intent to prototype and ship: Honor media HTML attribute for meta name=theme-color

112 views
Skip to first unread message

François Beaufort 🇫🇷

unread,
Jun 14, 2021, 4:44:20 AM6/14/21
to blink-dev

Contact emails

fbea...@chromium.org 


Explainer

https://github.com/whatwg/html/issues/6495

https://photos.app.goo.gl/kmhABhbVqVzneKxN6


Spec

https://github.com/whatwg/html/pull/6569

https://whatpr.org/html/6569/d79dc8e...66167db/semantics.html#the-meta-element


TAG review

As we're following Safari here and there seems to be WHATWG agreement on landing this, a TAG review doesn't seem required.

Summary

The meta element’s “media” attribute will be honored for meta[name="theme-color"] so that web developers can adjust the theme color of their site based on a media query (dark and light modes for instance). The first one that matches will be picked.


Blink component

Blink>HTML


Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes.


Demo link

https://media-meta-theme-color.glitch.me


Debuggability

DevTools already support viewport resizing and emulating a number of media features such as “prefers-color-scheme” and “prefers-reduced-motion” enabling web developers to observe theme color changes.


Measurement
The kMediaMetaThemeColor WebFeature will track the “media” attribute usage for meta[name="theme-color"] .


Risks


Interoperability and Compatibility

Safari is shipping this feature as part of their Safari 15 overall UI redesign (https://bugs.webkit.org/show_bug.cgi?id=224389)

Firefox does not do anything with meta[name=”theme-color”] anymore. (https://bugzilla.mozilla.org/show_bug.cgi?id=1706179#c2)


For compatibility risk, I've scanned the HTTP archive table 

“httparchive.response_bodies.2020_10_01_desktop” and “httparchive.response_bodies.2020_08_01_mobile” and there are no websites using meta[name=”theme-color”] with the “media” HTML attribute.


Signals from other implementations (Gecko, WebKit): 

Gecko: No Signal (https://github.com/mozilla/standards-positions/issues/514)

WebKit: Positive (https://github.com/whatwg/html/issues/6495)

Web / Framework developers: Positive (https://twitter.com/search?q=theme-color%20safari)


Ergonomics:

N/A


Activation:

Web developers should have the first meta[name="theme-color"] in tree order be the one without preference (by default, light mode for instance) and have any alternates come after. In other words, browsers that don’t support this feature would always pick the first one while new versions of Chrome would pick dark or light depending on system preference.


<meta name="theme-color" media="(prefers-color-scheme: light)" content="lightskyblue">

<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="darkblue">
<meta name="theme-color" media="(prefers-contrast: more)"      content="blue">


Chrome will use it for installed PWAs on Desktop and for all websites on Android.


Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.
No. A test suite is currently impossible due to the lack of an API to get the theme color (https://github.com/web-platform-tests/wpt/issues/29309). However some reflection tests are added (https://github.com/web-platform-tests/wpt/pull/28876). It is fully tested in Chromium using browser tests.


Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1200528


Entry on the feature dashboard

https://www.chromestatus.com/feature/5764461413531648


Rune Lillesveen

unread,
Jun 14, 2021, 6:03:54 AM6/14/21
to François Beaufort 🇫🇷, blink-dev
On Mon, Jun 14, 2021 at 10:44 AM 'François Beaufort 🇫🇷' via blink-dev <blin...@chromium.org> wrote:

Summary

The meta element’s “media” attribute will be honored for meta[name="theme-color"] so that web developers can adjust the theme color of their site based on a media query (dark and light modes for instance). The first one that matches will be picked.


Were other meta elements' processing considered to be affected by media?

Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.
No. A test suite is currently impossible due to the lack of an API to get the theme color (https://github.com/web-platform-tests/wpt/issues/29309). However some reflection tests are added (https://github.com/web-platform-tests/wpt/pull/28876). It is fully tested in Chromium using browser tests.


This adds "media" to the HTMLMetaElement idl and that API should be covered by tests.

--
Rune Lillesveen


Rune Lillesveen

unread,
Jun 14, 2021, 7:55:38 AM6/14/21
to François Beaufort 🇫🇷, blink-dev
I stopped reading after "No. A test suite is currently impossible due to the lack of an API to get the theme color".

The reflection tests were the type of tests I was asking for.

--
Rune Lillesveen

François Beaufort 🇫🇷

unread,
Jun 14, 2021, 8:04:17 AM6/14/21
to Rune Lillesveen, blink-dev
On Mon, Jun 14, 2021 at 1:55 PM Rune Lillesveen <fut...@chromium.org> wrote:


On Mon, Jun 14, 2021 at 12:03 PM Rune Lillesveen <fut...@chromium.org> wrote:


On Mon, Jun 14, 2021 at 10:44 AM 'François Beaufort 🇫🇷' via blink-dev <blin...@chromium.org> wrote:

Summary

The meta element’s “media” attribute will be honored for meta[name="theme-color"] so that web developers can adjust the theme color of their site based on a media query (dark and light modes for instance). The first one that matches will be picked.


Were other meta elements' processing considered to be affected by media?

No. meta[name="theme-color"] is the only element for now.



Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.
No. A test suite is currently impossible due to the lack of an API to get the theme color (https://github.com/web-platform-tests/wpt/issues/29309). However some reflection tests are added (https://github.com/web-platform-tests/wpt/pull/28876). It is fully tested in Chromium using browser tests.


This adds "media" to the HTMLMetaElement idl and that API should be covered by tests.

I stopped reading after "No. A test suite is currently impossible due to the lack of an API to get the theme color".

The reflection tests were the type of tests I was asking for.

Got it.
 

--
Rune Lillesveen

Yoav Weiss

unread,
Jun 16, 2021, 4:38:16 PM6/16/21
to blink-dev, François Beaufort
Thanks for working on this!

On Monday, June 14, 2021 at 10:44:20 AM UTC+2 François Beaufort wrote:

Anything preventing the PR from landing?

François Beaufort 🇫🇷

unread,
Jun 17, 2021, 2:08:12 PM6/17/21
to Yoav Weiss, blink-dev
On Wed, Jun 16, 2021 at 10:38 PM Yoav Weiss <yoav...@chromium.org> wrote:
Thanks for working on this!

On Monday, June 14, 2021 at 10:44:20 AM UTC+2 François Beaufort wrote:

Anything preventing the PR from landing?

A simple wording change still needs to be applied. See https://github.com/whatwg/html/pull/6569#discussion_r653762741
Otherwise we're good.

Rick Byers

unread,
Jun 17, 2021, 2:28:30 PM6/17/21
to François Beaufort 🇫🇷, Yoav Weiss, blink-dev
Looks like this landing is imminent and everything else looks good, so LGTM1 from me.

Thank you for this. I'm particularly glad for the improvement to dark mode support here.


--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPpwU5%2B53xbLkiw5SyZp3e%3DiwoHibipRNzi%3D1A_NS3nKpOq1Ww%40mail.gmail.com.

Yoav Weiss

unread,
Jun 17, 2021, 2:43:02 PM6/17/21
to Rick Byers, François Beaufort 🇫🇷, blink-dev
LGTM2. I'm similarly glad about potentially hitting less light background flashes when I'm in dark mode.

On Thu, Jun 17, 2021 at 8:28 PM Rick Byers <rby...@chromium.org> wrote:
Looks like this landing is imminent and everything else looks good, so LGTM1 from me.

Thank you for this. I'm particularly glad for the improvement to dark mode support here.


On Thu, Jun 17, 2021 at 2:08 PM 'François Beaufort 🇫🇷' via blink-dev <blin...@chromium.org> wrote:


On Wed, Jun 16, 2021 at 10:38 PM Yoav Weiss <yoav...@chromium.org> wrote:
Thanks for working on this!

On Monday, June 14, 2021 at 10:44:20 AM UTC+2 François Beaufort wrote:

Anything preventing the PR from landing?

A simple wording change still needs to be applied. See https://github.com/whatwg/html/pull/6569#discussion_r653762741
Otherwise we're good.

Yeah, I'm aware of the wording change :)
I wanted to make sure nothing else is pending. Thanks for verifying! 

Daniel Bratell

unread,
Jun 17, 2021, 2:51:11 PM6/17/21
to Yoav Weiss, Rick Byers, François Beaufort 🇫🇷, blink-dev
Reply all
Reply to author
Forward
0 new messages