Colour

light-dark()

Newly availablesince May 2024

Replaces: Every colour declared twice, once inside a prefers-color-scheme block. One declaration carries both values.

See it working

Dark

One declaration holds both values. The checkbox only flips color-scheme.

The syntax

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

The demo’s full CSS

.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; }

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.