Dark mode forms stay white: color-scheme is the switch

After dark mode is done, the white spots left on the page are usually controls: the list a select opens, the calendar behind input[type=date], the background autofill paints, the scrollbar. The page is already #101433 and those are still white.

The cause is not the background colour

The look of native controls is decided by color-scheme. It tells the browser which themes the page supports, and the browser uses that for the parts a page cannot paint: popup lists, calendars, autofill. Setting background: transparent on the input only affects the box itself, never the layer the browser renders on top.

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

This site stores the theme as an explicit value on html[data-theme], so the mapping lives there too, instead of handing light dark to the system. The in-page toggle is allowed to disagree with the operating system, and that only works if the declaration is explicit.

accent-color covers the other group

Checkboxes, radio buttons, progress bars and range sliders are painted in a single accent colour, and accent-color is what selects it:

:root { accent-color: var(--c-accent); }

One line, and it follows the theme tokens. After those two declarations, what remains is the genuinely small set that needs individual patches: ::file-selector-button, ::-webkit-calendar-picker-indicator, ::placeholder.

Do not invert the order

Style the custom controls first and add color-scheme later, and you end up with patches that look fine in light mode and like stickers in dark mode, because those patches existed to hide a white popup. Declare the theme first, then decide which controls deserve a redraw.

Anything color-scheme and accent-color can express should not be redrawn with appearance: none.