demo · v137

if()

CSS if() picks a value inline from a series of condition-value pairs. Toggle the theme below — swatches recolour from a single style rule, no class swap, no cascade juggling.

Heads upif() ships in Chrome 137. If your browser is older the JS fallback below will apply the same colours imperatively so the demo still works.
probing CSS.supports("background: if(style(--x: 1): red; else: blue)")…
primary surface accent

the code

:root { --theme: light; }
.swatch {
  background: if(
    style(--theme: dark): #111;
    style(--theme: hi-contrast): #ff0;
    else: #fdfcf8
  );
  color: if(
    style(--theme: dark): #fdfcf8;
    style(--theme: hi-contrast): #000;
    else: #000
  );
}

see also