Declare color-scheme for Dark Themes
MUST: Set `color-scheme` on `<html>` (`dark`, or `light dark` to follow the OS) so browser-drawn UI — scrollbars, checkboxes, radios, range tracks, date pickers, number spinners — repaints for the theme. This is separate from reading `prefers-color-scheme`, which only tells you what the user wants.
Set the CSS color-scheme property on <html> so native browser UI follows the theme
html { color-scheme: light dark; }
html[data-theme="dark"] { color-scheme: dark; }Bad
Good
Why it matters
Your CSS only paints what you render — scrollbars, checkboxes, radios, range tracks, date pickers, and number spinners are drawn by the browser itself, and it draws them light unless told otherwise. The `color-scheme` property is that signal: it switches the user agent's rendering intent, so those native widgets repaint dark for free. This is distinct from reading `prefers-color-scheme` (which tells *you* what the user wants, and prevents a theme flash) — `color-scheme` tells the *browser* what you chose. Set `color-scheme: dark` on the dark theme, or `light dark` on `<html>` to let the UA follow the OS.