Media Queries: prefers-color-scheme feature

Category: CSS
Type: New or changed feature
Status: Enabled by default (Chrome 76)
Intent stage: Prepare to ship

Breaking change: No
Enterprise impact: None
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/css/mediaqueries/prefers-color-scheme.html?label=master&product=chrome%5Bexperimental%5D&product=edge&product=firefox%5Bexperimental%5D&product=safari%5Bexperimental%5D&aligned

Summary

Adds the 'prefers-color-scheme' feature, which lets authors adapt web content to user-selected dark theme in the OS or browser. Valid options are 'light', 'dark', or 'no-preference'.

Standards & signals

Specification: https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
Firefox: Shipped/Shipping — Shipped in Firefox 67
Safari: Shipped/Shipping — Shipped in Safari 12.1
Web developers: Positive
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=889087

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fmediaqueries%2Fprefers-color-scheme
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+Media%20Queries%3A%20prefers-color-scheme%20feature
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Media%20Queries%3A%20prefers-color-scheme%20feature
Baseline status: https://webstatus.dev/?q=Media%20Queries%3A%20prefers-color-scheme%20feature

Samples: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#Examples

View on chromestatus.com