Theming in CSS

One set of names, three ways to choose the values: the system, a class, an attribute.

:root {
  --paper: #ffffff;
  --ink: #1f2937;
  --edge: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16181d; --ink: #e5e7eb; --edge: #2a2d34;
  }
}

:root[data-theme="dark"] {
  --paper: #16181d;
  --ink: #e5e7eb;
  --edge: #2a2d34;
}

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

How it works

1. The default block is the light theme; the media query is the system's dark.
2. An explicit data-theme beats the system, which is what a toggle needs.
3. Components never mention a color, only a token.

Keywords and builtins used here

• background
• color
• media
• var

The run, in numbers

Lines

19

Characters to type

324

Tokens

88

Three-star pace

90 tpm

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

Type this snippet

Step 1 of 2 in Themes & tools, step 7 of 9 in Organizing CSS.

← Previous Next →