【CSS】ダークモード設定時でもサイト全体でライトモードの配色を維持したいとき

結論

下記のように設定する.

:root {
  color-scheme: light;
}

ハマったところ

もともと表題のような input[type=text] を作りたかったが,
フォームの自動補完 （autofill） 後（手入力時とは異なる背景色になる） だけ css では制御できなかった.
※ Google Chrome 特有の現象っぽい.

制御できない例：

/* 制御できない例1: 自動補完されたフォームに自動的にフォーカスが当たるので、そのスタイルを指定する */
input {
  &:-webkit-autofill:focus {
    color: #333;
    background: #fff !important;
  }
}

/* 制御できない例2:　(prefers-color-scheme: dark) を使用する */
@media (prefers-color-scheme: dark) {
  input {
    &:-webkit-autofill {
      color: #333;
      background: #fff !important;
    }
  }
}

どうもこのあたり, ユーザーエージェントスタイルシートによって強固に縛られているようだった.
https://developer.mozilla.org/ja/docs/Web/CSS/:autofill

メモ: 多くのブラウザーのユーザーエージェントスタイルシートでは、 :-webkit-autofill スタイル定義に !important を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。例えば、 Chrome では内部スタイルシートで次のようになっています。

CSS
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;

これは、 background-color, background-image, color に独自のルールを設定できないことを意味します。

JS で強制的に上書きする方法も検討したが, 最初から全体に color-scheme を設定するだけで良かった.

😭

参考

[CSS] ダークモードを有効化しない方法 |
https://b.0218.jp/202202252228.html
メタタグで color-scheme を設定する方法が最初に紹介されているが、弊環境では再現せず

自動補完でinputの背景色が変わらないようにする方法
https://qiita.com/matcha_kinako/items/b785ccb6aabd97829581

CSS優先度のちょっと細かい話 !importantから継承まで
https://qiita.com/keyhole0/items/2c9040f7706ba5f17371