Web platform features explorer - light-dark()

Web platform features explorer

The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.

Status

Baseline Newly Available (since 2024-05-13)

This feature is expected to reach Baseline Widely Available status on: 2026-11-13

MDN documentation

light-dark()

Specifications

CSS Color Module Level 5 (#light-dark), from Cascading Style Sheets (CSS) Working Group (W3C).

Browser support

Chrome 123 Released on 2024-03-19
Chrome Android 123 Released on 2024-03-19
Edge 123 Released on 2024-03-22
Firefox 120 Released on 2023-11-21
Firefox for Android 120 Released on 2023-11-21
Safari 17.5 Released on 2024-05-13
Safari on iOS 17.5 Released on 2024-05-13

Developer signals

State of HTML 2025: usage/html_interoperability_features question
State of HTML 2025: performance/performance_pain_points question
State of HTML 2025: graphics_multimedia/graphics_pain_points_limitations_1 question
State of HTML 2025: graphics_multimedia/graphics_pain_points question
State of HTML 2025: forms/forms_pain_points question
State of HTML 2025: content/content_pain_points question
State of CSS 2025: usage/gamechanger_feature question
State of CSS 2025: usage/favorite_new_features question
State of CSS 2025: usage/css_missing_features question
State of CSS 2025: usage/css_interoperability_features question
State of CSS 2025: reading_list/reading_list question
State of CSS 2025: features/all_features question
State of CSS 2025: colors/colors_pain_points question
State of CSS 2024: usage/favorite_new_features question
State of CSS 2024: reading_list/reading_list question
State of CSS 2024: features/all_features question

Usage (according to Chrome Platform Status)

~0.963% of page loads. More data at chromestatus.com.

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