color-scheme
Tells the browser which color schemes are supported. Affects browser default UI for form elements, scrollbars, etc.
Class List
| Class | CSS | Description |
|---|---|---|
csn | color-scheme: normal | Browser default. Follows system setting |
csl | color-scheme: light | Tells browser only light mode supported |
csd | color-scheme: dark | Tells browser only dark mode supported |
Live Demo
The same form controls are declared with a light scheme on the left and a dark scheme on the right. Neither box sets a background color, yet the browser default colors of the text field, select, checkbox, date picker, and scrollbar come out different.
Light scheme — csl
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The field background is light and the checkbox and scrollbar are painted with the light theme.
Dark scheme — csd
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
The scrollbar color follows the scheme as well.
Identical markup, but the browser uses dark default widget colors. The date picker popup also opens dark.
Check it yourself
The text and borders inside both boxes use the same classes. Everything that differs is browser-painted default UI, which is exactly the scope of color-scheme.
Affected Elements
color-scheme only affects browser default UI. No effect on custom styles.
| element | Effect |
|---|---|
| input, textarea, select | Background, border, and text colors change to match the scheme |
| Scrollbar | Applies scrollbar colors matching the dark/light theme |
| checkbox, radio | Checked-state colors change according to the scheme |
| System color keywords | System colors like Canvas, CanvasText follow the scheme |
Per-class Detail
csncolor-scheme: normal
The initial value. It means the element declares no particular scheme, so the browser follows the inherited scheme or the system setting.
When to use
Use it to hand a specific area back to the browser inside a region where light or dark was forced further up.
<!-- Follow whatever the system and the browser decide -->
<div class="csn p2rem br8px">
<input type="text" placeholder="Follows the system setting" />
</div>cslcolor-scheme: light
Tells the browser this element and its descendants support the light scheme. Browser default UI is painted light even when the system is in dark mode.
When to use
Apply it to areas inside a dark page that must always look like white paper: document previews, print previews, invoices.
<!-- Light island inside a dark page (docs, invoice preview) -->
<section class="csl bgFFFFFF c000000 p2rem br8px">
<h3 class="fs2rem fw700 mb16px">Invoice preview</h3>
<input type="date" class="py8px px12px br4px" />
<select class="py8px px12px br4px">
<option>Paid</option>
<option>Pending</option>
</select>
</section>csdcolor-scheme: dark
Tells the browser this element and its descendants support the dark scheme. Text fields, selects, checkboxes, date pickers, and scrollbars switch to their dark defaults.
When to use
Most commonly applied to the root of a dark themed site. Forgetting it leaves glaring white inputs and white scrollbars on a dark background.
<!-- Dark app shell: native widgets follow the dark theme -->
<html class="csd">
<body class="bg0F0F17 cFAFAFA">
<input type="text" placeholder="Dark input" />
<input type="checkbox" checked />
</body>
</html>Usage Examples
The basic form for declaring a scheme site-wide and for a single region.
<!-- Apply dark mode to entire site -->
<html class="csd">
<body class="bg000000 cFAFAFA">
<!-- Form elements and scrollbars automatically use dark theme -->
<input type="text" placeholder="Dark theme input field" />
</body>
</html>
<!-- Light mode for specific section only -->
<div class="csl bgFFFFFF c000000 p2rem br8px">
<input type="text" placeholder="Light theme input field" />
</div>A settings form on a dark surface. The date picker popup and the scrollbar follow the dark scheme too.
<!-- Settings form on a dark surface -->
<form class="csd bg0F0F17 b1pxsolid27272A br12px p3-2rem df fdc gap16px">
<label class="df fdc gap8px">
<span class="fs14px cA1A1AA">Display name</span>
<input type="text" class="py8px px12px br4px b1pxsolid27272A" />
</label>
<label class="df fdc gap8px">
<span class="fs14px cA1A1AA">Renewal date</span>
<!-- The native date picker also opens in dark -->
<input type="date" class="py8px px12px br4px b1pxsolid27272A" />
</label>
<label class="df aic gap8px fs14px cA1A1AA">
<input type="checkbox" checked />
<span>Email me about product updates</span>
</label>
<!-- The scrollbar of this box follows the dark scheme too -->
<div class="oya maxh20rem fs14px cA1A1AA lh1-7">
<p class="mb12px">Long terms text...</p>
</div>
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Save</button>
</form>Tips
Dark mode sites
Apply csd to root on dark theme sites to adjust form elements and scrollbars.
Caution
color-scheme doesn't change background/text colors directly. Use bg, c for custom colors.
It does not change your own colors
color-scheme only changes browser-painted default UI. Backgrounds and text colors you set yourself are untouched, so a dark theme still has to be built with bg and c classes.
Setting a background on the control hides the effect
Giving an input an explicit background such as bgFFFFFF overrides the background the scheme would have used. Leave the color unset where you want the browser default to show through.
To cover the page scrollbar as well
Apply it to the root element so the page-level scrollbar and browser UI follow the scheme. Applied to a single region, it only affects scroll areas inside that region.