Honor media HTML attribute for meta name=theme-color

Category: DOM
Type: Chromium catches up
Status: Enabled by default (Chrome 93)
Intent stage: Shipped

Breaking change: No
Enterprise impact: None
Chromium flag: enable-experimental-web-platform-features
Spec maturity: Unknown status
Web Platform Tests: No

WPT details: 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.

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.

Standards & signals

Specification: https://github.com/whatwg/html/pull/6569
Firefox: No signal
Safari: Positive
Web developers: Positive
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1200528

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=honor-media-html-attribute-for-meta-name-theme-color
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Honor%20media%20HTML%20attribute%20for%20meta%20name%3Dtheme-color
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Honor%20media%20HTML%20attribute%20for%20meta%20name%3Dtheme-color
Baseline status: https://webstatus.dev/?q=Honor%20media%20HTML%20attribute%20for%20meta%20name%3Dtheme-color

Docs: https://web.dev/add-manifest/#theme-color

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

Explainers: https://github.com/whatwg/html/issues/6495 https://photos.app.goo.gl/kmhABhbVqVzneKxN6

View on chromestatus.com