v137 · css

Dark Mode Tokens via CSS if()

Each design token is a single CSS declaration: --bg: if(media(prefers-color-scheme: dark): #1a1a1a; else: #f0efe9). No separate @media block, no doubled custom property, no JS class toggle — the entire color scheme lives in :root.

Feature detection: checking…
Note: CSS if() is not supported in this browser. Use Chrome 137+ to see the token-in-one-declaration pattern.

live preview

Force light or dark scheme to see the tokens switch instantly. The card uses only the var(--bg), var(--fg), etc. tokens — no separate @media rules.

Article Preview
CSS if() lets you encode both light and dark values for each token in a single custom property declaration. The design system collapses from two token files to one.
New in Chrome 137
Settings form
Status: ✓ Connected · Errors: 2 warnings

token inventory

tokenlight valuedark valueif() declaration
 
/* Before: two blocks, tokens repeated */
:root {
  --bg: #f0efe9;
  --fg: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --fg: #f0f0f0;
  }
}

/* After Chrome 137: one declaration per token */
:root {
  --bg: if(media(prefers-color-scheme: dark): #1a1a1a; else: #f0efe9);
  --fg: if(media(prefers-color-scheme: dark): #f0f0f0; else: #1a1a1a);
  --accent: if(media(prefers-color-scheme: dark): #7aa2e8; else: #2855ad);
}

see also