prefers-color-scheme media query
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
Specifications
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
Surveys
- State of HTML 2025 > accessibility > accessibility techniques
- State of HTML 2024 > accessibility > accessibility techniques
- State of HTML 2023 > accessibility > accessibility techniques
- State of CSS 2025 > usage > gamechanger feature
- State of CSS 2025 > usage > favorite new features
- State of CSS 2025 > usage > css missing features
- State of CSS 2025 > usage > css interoperability features
- State of CSS 2025 > colors > colors pain points
- State of CSS 2024 > features > all features
Web Platform Tests (WPT)
View the latest WPT test results for this featureView as JSON | Edit this feature | Report an issue | Web-features entry: source, dist