ダークモード対応基礎

prefers-color-schemeを使用してCSSやJavaScriptを使って判定をする。

:root {
  --main-text-color: #333;
}
@media (prefers-color-scheme: dark) {
  :root {
    --main-text-color: #ddd;
  }
}
 
body {
  color: var(--main-text-color);
}

const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

機能はオンオフできるようにするというアクセシビリティの原則に基づき、チェックボックスなどでダークモードをオンオフできるようにするのがよい。

html（pictureタグ）の場合は以下のようにする。

<picture>
  <source srcset="dark.png" media="(prefers-color-scheme: dark)" />
  <img src="light.png" alt="" />
</picture>

デザインについて

デザインにおいては、単純に「色を暗くする」と捉えるのではなく、目の負担を和らげ、ユーザーの集中力を高め、バッテリーを節約させるという目的がある。

ダークモードを使えば、より作業に集中しやすくなります。コントロールやウインドウが暗くなって背景に溶け込み、作業中のコンテンツが際立ちます。

https://support.apple.com/ja-jp/HT208976

またベースの背景色は#121212が推奨される。