light-dark() + color-scheme
Try: Switch OS light/dark (or DevTools rendering →
prefers-color-scheme). Page flips without duplicate
@media (prefers-color-scheme) blocks.
:root { color-scheme: light dark; } enables the function.
Colors use light-dark(lightToken, darkToken).
Source
:root {
color-scheme: light dark;
}
body {
color: light-dark(#171717, #f5f5f5);
background: light-dark(#fafafa, #0f172a);
}
.panel {
border: 1px solid light-dark(#e5e5e5, #334155);
background: light-dark(#ffffff, #1e293b);
}
Support: Baseline 2024 per MDN—still verify in older
mobile browsers before marketing sites rely on it alone.