Color Scheme

Supported Per Spec Updated: Dec 17, 2025

Allows elements to define which color schemes they may be rendered in: light, dark, or prioritizing the order for both.

Baseline:
Widely
Functional:
Supported
Usage:
Cross-Boundary

The color-scheme property is inherited across the shadow boundary, allowing shadow DOM elements to respond to the document or an ancestor's color scheme. This enables automatic adaptation of page elements to the user's preferred color scheme, with form elements adjusting their appearance for improved contrast.

A shadow-defined color-scheme is also inheritable by slotted children.