Light and dark without duplication in CSS

Declare the schemes you support and let one set of variables switch.

:root {
  color-scheme: light dark;
  --paper: light-dark(#ffffff, #16181d);
  --ink: light-dark(#1f2937, #e5e7eb);
  --muted: light-dark(#64748b, #94a3b8);
  --edge: light-dark(#e5e7eb, #2a2d34);
}

body {
  background: var(--paper);
  color: var(--ink);
}

.card { border: 1px solid var(--edge); }
.card p { color: var(--muted); }

.panel { color-scheme: only light; }

How it works

1. color-scheme makes the browser's own widgets match the theme.
2. light-dark() picks between two values in one declaration.
3. It only works where color-scheme is set, which is usually the root.

Keywords and builtins used here

• background
• border
• card
• color
• panel
• px
• var

The run, in numbers

Lines

17

Characters to type

356

Tokens

97

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 65 seconds.

Type this snippet

Step 3 of 3 in Other media, step 12 of 13 in Styling components.

← Previous Next →