light-dark()

See it working

The syntax

:root { color-scheme: light dark; }
.card { background: light-dark(#fff, #14161d);
        color:      light-dark(#14161d, #f2f3f7); }

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable .dm-ld { color-scheme: light; padding: 16px; border-radius: 10px; background: light-dark(#ffffff, #14161d); color: light-dark(#14161d, #f2f3f7); border: 1px solid light-dark(#dfe2ea, #2b2f3c); } .dm-ld:has(input:checked) { color-scheme: dark; } .dm-ld label { font-size: 13px; font-weight: 700; display: inline-flex; gap: 7px; align-items: center; } .dm-ld p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }

ResetCopy

For browsers without it

Declare the light value on its own line first. A browser without light-dark() keeps it, and gets a light theme only, which is what it had before.