Dark Mode Controls Demo: CSS Property

This demo shows how controls respond color-scheme: light dark; set on the document :root.

The controls will render with a light or dark user agent scheme, according to the user's preferred scheme. To try this out on Windows, go to Settings app > Personalization > Colors and modify 'Choose your color'.

Control name Rendered control
Checkbox
Radio
Button
Text
Password
Number
Textarea
Select
Select: Multiple
Range
Progress 75%
Meter at 66/100
Color
Date, Week, Month
Time, Datetime Local
Datalist
File
Search
Link color-scheme property