CSS color recipe
light-dark() Both themes in one declaration
light-dark(a, b) is a in a light color scheme and b in a dark one. With color-scheme: light dark on the root it follows the reader’s system, and color-scheme on any element forces one scheme for that part of the page.
- Baseline
- Newly available
- First versions
- Chrome 123 · Firefox 120 · Safari 17.5
- Tested
- 3 of 3 engines
Live example
The recipe, running
Left: the CSS below, as your browser runs it. Right: the same CSS as a browser without the feature reads it, so you see exactly what the fallback gives.
Turn on JavaScript to see whether your browser supports it; the examples work either way.Your browser supports it, so the left example runs the modern path.Your browser does not support it yet, so both examples show the fallback.
The CSS
Copy it as it is
This is the exact CSS the example runs. Fallbacks come first; the modern values follow, so each browser keeps the last line it understands.
light-dark.css
:root { color-scheme: light dark; }
/* Fallback: follows the operating system only. */
.panel { padding: 16px; border: 1px solid #DAD1BF; border-radius: 12px; background: #FCF9F2; color: #2F2B24; }
@media (prefers-color-scheme: dark) {
.panel { border-color: #2C2A26; background: #171613; color: #F2EFE9; }
}
@supports (color: light-dark(red, red)) {
.panel {
border-color: light-dark(#DAD1BF, #2C2A26);
background: light-dark(#FCF9F2, #171613);
color: light-dark(#2F2B24, #F2EFE9);
}
}
/* Force a scheme on part of the page. */
.light { color-scheme: light; }
.dark { color-scheme: dark; }How it works
What each part does
The fallback follows the system only. Without
light-dark(), theprefers-color-schemequery is all an older browser has, so it cannot honor.lightand.dark: the right-hand example shows both panels the same.color-schemedoes more than this. It also switches form controls, scrollbars and the default canvas, which is why it belongs on the root.Colors only.
light-dark()takes colors; for a dark-only shadow or image, keep aprefers-color-schemerule.
Browser support
Where it runs
First version of each browser with the feature, from the web-features project and MDN’s browser-compat-data. “No” means not supported yet.
- light-dark()Newly availableBaseline newly available since 13 May 2024: every core browser has it, but older versions in use may not.
- color-schemeWidely availableBaseline widely available since 3 August 2024.
| Browser | light-dark() | color-scheme |
|---|---|---|
| Chrome | 123 | 98 |
| Chrome for Android | 123 | 98 |
| Edge | 123 | 98 |
| Firefox | 120 | 96 |
| Firefox for Android | 120 | 96 |
| Safari | 17.5 | 13 |
| Safari on iOS | 17.5 | 13 |
Support reviewed on against web-features 98723fd and browser-compat-data 3b28abe.
Tested
Tested in three engines
| Engine | Version | Supported | As written | Fallback |
|---|---|---|---|---|
| Chromium | 147.0.7727.15 | Yes | Pass | Pass |
| Firefox | 148.0.2 | Yes | Pass | Pass |
| WebKit | 26.4 | Yes | Pass | Pass |
Run on in Chromium 147.0.7727.15, Firefox 148.0.2 and WebKit 26.4, with Playwright.
Accessibility
Measured, not assumed
Text measures 13.39:1 on the light panel and 15.77:1 on the dark one.
- 13.39:1AAA
#2F2B24 / #FCF9F2 - 15.77:1AAA
#F2EFE9 / #171613
References
Go to the source
- CSS Color Module Level 5: light-dark()www.w3.org
- CSS Color Adjustment Module Level 1: color-schemewww.w3.org
- Media Queries Level 5: prefers-color-schemewww.w3.org
- web-features at 98723fdgithub.com
- MDN browser-compat-data at 3b28abegithub.com