CSSでダークモードに対応する

ダークモードの対応をする方法について調べたことをメモ。

ダークモードの切り替え設定

まずCSSの設定を試す前に、ダークモードの切り替え設定を確認してみます。
Windowsの場合、スタートメニュー > 設定 > 個人用設定 > 色 > モードを選ぶ から設定できます。

Macの場合はOSのバージョンによって異なるので、詳しくは公式サイトをご確認ください。

prefers-color-scheme

まずはprefers-color-schemeです。
prefers-color-schemeはメディア特性で、ユーザーがダークモードを設定しているかが判別できます。

対応ブラウザはこちらで、主要なブラウザで特に問題なくサポートされています。

使い方は以下の通りで、メディアクエリ内にダークモード時のスタイルを指定します。

body {
  color: black;
  background-color: white;
}
@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: black;
  }
}

これでダークモードに切り替えると、背景が黒色で表示されました。
prefers-color-schemeのデモページ

以下のように変数(カスタムプロパティ)で管理しておくとよさそうです。

:root {
  --text-color-base: black;
  --bg-color-base: white;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color-base: white;
    --bg-color-base: black;
  }
}

body {
  color: var(--text-color-base);
  background-color: var(--bg-color-base);
}

prefers-color-schemeのデモページ2

light-dark()

次にlight-dark()です。
light-dark()は第一引数がライトモード時の色、第二引数がダークモードの色を取り、ユーザーの設定またはサイト側の設定に応じてどちらかの色を返します。

対応ブラウザはこちらで主要なブラウザでサポートされていますが、
chromeがバージョン123(2024年3月)、Safariがバージョン17.5(2024年5月)、Firefoxがバージョン120(2024年11月)と比較的最近サポートされたところなので、対応範囲によっては注意が必要そうです。

使い方としては色を設定する箇所でlight-dark()を使えばよいのですが、その際に合わせてcolor-schemeを設定しておく必要があります。
color-schemeはどのモードを使用するかを明示することができ、以下の場合はユーザーの設定に合わせたモードでの表示になります。

:root {
  color-scheme: light dark;
}
body {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

light-dark()のデモページ

prefers-color-schemeの時と同様に、変数で管理しておくとよさそうです。

:root {
  color-scheme: light dark;
  --text-color-base: light-dark(black, white);
  --bg-color-base: light-dark(white, black);
}
body {
  color: var(--text-color-base);
  background-color: var(--bg-color-base);
}

light-dark()のデモページ2

color-schemeはユーザーの設定を上書きできるので、以下のようにライトモードやダークモード用のclassを用意することもできます。

:root {
  color-scheme: light dark;
  --text-color-base: light-dark(black, white);
  --bg-color-base: light-dark(white, black);
}
body {
  color: var(--text-color-base);
  background-color: var(--bg-color-base);
}

body.is-light {
  color-scheme: light;
}
body.is-dark {
  color-scheme: dark;
}

例として、ボタンクリックでモードの切り替えをできるようにしてみます。

<button id="change" type="button">切り替え</button>

ユーザーの設定はmatchMedia()を使って判別できます。

// ページアクセス時
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
if(isDarkMode) {
  document.body.classList.add('is-dark');
  document.getElementById('change').innerText = 'ライトモードに切り替え';
} else {
  document.body.classList.add('is-light');
  document.getElementById('change').innerText = 'ダークモードに切り替え';
}

// 切り替えボタンクリック時
document.getElementById('change').addEventListener('click', function() {
  if(document.body.classList.contains('is-light')) {
    document.body.classList.remove('is-light');
    document.body.classList.add('is-dark');
    document.getElementById('change').innerText = 'ライトモードに切り替え';
  } else {
    document.body.classList.remove('is-dark');
    document.body.classList.add('is-light');
    document.getElementById('change').innerText = 'ダークモードに切り替え';
  }
});

これでボタンクリックでライトモードとダークモードの切り替えができました。
light-dark()のデモページ3