ダークモードなのにフォームが白い：color-scheme が本丸

ダークモードを一通り作ったあと、白いまま残るのはだいたいコントロールです。select が開くリスト、input[type=date] のカレンダー、自動入力が塗る下地、スクロールバー。ページはもう #101433 なのに、そこだけ白い。

原因は背景色ではない

ネイティブコントロールの見た目を決めるのは color-scheme です。ページがどのテーマに対応しているかをブラウザに伝え、ブラウザはそれを使ってページ側では描けない部分（ポップアップ、カレンダー、自動入力）の色を決めます。input に background: transparent と書いても効くのは入力欄そのものだけで、ブラウザが描く重なりには届きません。

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

このサイトはテーマを html[data-theme] の明示的な値として持っているので、対応表もそこに書きます。light dark をシステムに任せないのは、サイト内の切り替えが OS と食い違ってよい設計だからです。明示しないとその食い違いが表現できません。

accent-color が担当するもう一群

チェックボックス、ラジオボタン、プログレスバー、範囲スライダーは単一のアクセント色で描かれ、それを決めるのが accent-color です。

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

1 行で済み、テーマのトークンにも追随します。この 2 つを書いたあとに残るのは、本当に個別対応が要る少数派だけです。::file-selector-button、::-webkit-calendar-picker-indicator、::placeholder。

順番を逆にしない

カスタムコントロールの見た目を先に整え、color-scheme を後から足すと、ライトでは普通に見えてダークでは貼り付けたように見えるパッチが溜まります。それらは白いポップアップを隠すために足したものだからです。先にテーマを宣言し、そのうえで描き直す価値のあるコントロールだけを選びます。

color-scheme と accent-color で表せるものを appearance: none で描き直さない。