Support light and dark from the start

How to do it

Add the meta tag and set color-scheme: light dark on :root. Define each colour once as a token, ideally with light-dark(), as in define every colour once. Let a theme switch change color-scheme, instead of copying rules.

Example

<meta name="color-scheme" content="light dark">

:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #1b1f3b);
  --text: light-dark(#1b1f3b, #f4f5fb);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { background: var(--bg); color: var(--text); }

How to check

Loading in dark mode shows no white flash. Form controls and scrollbars match.