OS側がライトモード・ダークモードをしているときサイトが対応していれば自動的に適応してくれるか？

https://csswg.orgにあるメディアクエリレベル5（Media Queries Level 5）にある
https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
を使えばユーザーがライトモードかダークモードを欲しているかわかります。

使用例：

/* ライトモード */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Windows 10

• Windows 10 20H2 Build 19042 + Chrome 87
• Windows 10 20H2 Build 19042 + Edge 87 (chromium)
• Windows 10 20H2 Build 19042 + Firefox 84
• Windows 10 20H2 Build 19042 + Opera 73
• Windows 10 20H2 Build 19042 + Midori v9

Windows 10にて「設定」→「個人用設定」→「テーマ」→「色」→「色を選択する」にて（白|黒|カスタム）があるので、上記CSSを使用したサイトを構築すればWin10にてライトモード・ダークモードが上記組み合わせで適用されます。

• Windows 10 20H2 Build 19042 + Internet Explorer 11

ダークモードがそもそもサポートされていない。

Android

• Android 9 + Chrome 87

Chromeがcssのprefers-color-schemeに反応はしているが、AndroidのOS設定でライト・ダークモード切り替えにてChromeがライト・ダークモードの切り替えをしてくれない。反応してくれないのはもしかしたらOSの設定ではなくて使用している端末の独自設定によるライト・ダークモードだからかもしれない。

FireOS

• Amazon FireOS 7.3.1.7 + Silk Browser
• Amazon FireOS 7.3.1.7 + Chrome 87

cssのprefers-color-schemeには反応するみたいだけどOS側がライト・ダークモードの切り替えができないので実際には試せない。FireOS独自の色反転で無理やり”ダークモードモドキ”はできるけど全ての色が反転してしまうので意味がない。

iOS

• iOS (iPad/iPhone) 14.3 + Safari
• iOS (iPad/iPhone) 14.3 + Chrome

iOS設定からライトモード・ダークモードの切り替えで上記CSSは反応する。

MacOS

持ってないのでわかりません。

Lubuntu

Lubuntu 18.04 + Firefox 84

う～ん、そもそもデフォルトでダークモードの設定の仕方が無い気がする。