Web platform features explorer - prefers-color-scheme media query

Web platform features explorer

The prefers-color-scheme CSS media query sets styles based on the requested color scheme, light or dark.

Status

Baseline Widely Available (since 2022-07-15)

MDN documentation

prefers-color-scheme

Specifications

Media Queries Level 5 (#prefers-color-scheme), from Cascading Style Sheets (CSS) Working Group (W3C).

Browser support

Chrome 76 Released on 2019-07-30
Chrome Android 76 Released on 2019-07-30
Edge 79 Released on 2020-01-15
Firefox 67 Released on 2019-05-21
Firefox for Android 67 Released on 2019-05-21
Safari 12.1 Released on 2019-03-25
Safari on iOS 13 Released on 2019-09-19

Developer signals

State of HTML 2024: accessibility/accessibility_techniques question
State of HTML 2023: accessibility/accessibility_techniques question
State of CSS 2024: features/all_features question

Web Platform Tests (WPT)

View the latest WPT test results for this feature

View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist