ダークモードに対応しよう

夜、ふとんの中で見るまぶしい白い画面——つらいですよね。だから多くの人が、スマホやPCをダークモード（黒基調の配色）に設定しています。その設定をCSSで受け取れば、あなたのページも自動で夜仕様に切りかわります。

書き方：ふだんの色＋夜の上書き

まずふだん（ライト）の色を書き、ダークモードのときだけ上書きします。

body {
  background: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #1b1b1f;
    color: #e6e6e6;
  }
}

ダークモード設定の人がページを開くと、背景が濃い色・文字が明るい色に自動で切りかわります。JavaScriptは1行も要りません。

動きを見てみよう

本物はOSの設定にブラウザが自動で反応しますが、このデモではボタンで疑似的に切りかえます。

夜の配色、3つの気をつけどころ

• 真っ黒×真っ白にしない — #000背景に#fff文字はコントラストが強すぎて目が疲れます。背景は#1b1b1fのような少し明るい黒、文字は#e6e6e6のような少し暗い白が定番です
• 読めるかは夜も確認 — 色を反転すると、ライトでは読めた組み合わせが読めなくなることがあります。ダークモードでもコントラスト比の合格ラインは同じです
• 全部の色を用意しなくていい — まずは背景と文字色だけで十分。カードや枠線は、ページが育ってから少しずつ

ブラウザ標準の部品にも伝える：color-scheme

:root {
  color-scheme: light dark;
}

prefers-color-schemeは自分の書いたCSSに効く合図でしたが、color-schemeはブラウザ自身の部品への合図です。これを書いておくと、スクロールバーやチェックボックスといった、自分では色を書いていない標準部品も、設定に合わせて自動で切りかわるようになります。

このレッスンのまとめ

1. @media (prefers-color-scheme: dark)で、ダークモード設定の人にだけ効くCSSが書ける
2. ふだんの色を先に書き、ダークのときだけ上書きする
3. 真っ黒×真っ白は避けて、少しやわらげた黒と白を使う