ダークモード実装時の備忘録

Webサイトでのダークモードの実装には、主に以下の二つの方法があります。
本記事ではこの二つの実装方法について記載します。

1. ブラウザやOSの設定を検知してダークモードを適用する
2. サイト内に設置したボタンでダークモードとライトモードを切り替える

1. ブラウザやOSの設定を検知してダークモードを適用する

ユーザのブラウザやOSの設定に基づいて、自動的にダークモードまたはライトモードのスタイルを適用します。

これを実現するには、CSSのメディアクエリ prefers-color-scheme を使用します。
このメディアクエリは、ユーザがダークモードを選択しているかどうかを検知し、その結果に基づいてスタイルを適用します。

実装例

以下のコードは、ユーザの設定に応じてダークモードまたはライトモードのスタイルを適用する例です。

:root {
  --dark-bg: 33, 33, 33;
  --dark-color: 255, 255, 255;
  --light-bg: 255, 255, 255;
  --light-color: 33, 33, 33;
}

/* ブラウザやOSのモード設定がダークモードの場合 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: rgb(var(--dark-bg));
    color: rgb(var(--dark-color));
  }
}

/* デフォルトのライトモードのスタイル */
body {
  background-color: rgb(var(--light-bg));
  color: rgb(var(--light-color));
}

2. サイト内に設置したボタンでダークモードとライトモードを切り替える

JavaScriptでボタンを押したときにdarkというクラスをbodyに付与し、そのクラスをもとにCSSでダークテーマのスタイルを適用します。

また、ユーザのテーマ選択をlocalStorageに保存し、次回訪問時にその設定を反映するようにします。

実装例

以下のコードは、darkクラスを付与してダークモードを適用する例です。

<button id="toggle-theme">テーマを切り替える</button>

<script>
  const toggleButton = document.getElementById('toggle-theme');

  // ページ読み込み時に保存されたテーマを適用
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme === 'dark') document.body.classList.add('dark');

  toggleButton.addEventListener('click', () => {
    document.body.classList.toggle('dark');
    
    // テーマの保存
    if (document.body.classList.contains('dark')) {
      localStorage.setItem('theme', 'dark');
      return;
    } 
    localStorage.setItem('theme', 'light');
  });
</script>

<style>
:root {
  --dark-bg: 33, 33, 33;
  --dark-color: 255, 255, 255;
  --light-bg: 255, 255, 255;
  --light-color: 33, 33, 33;
}

/* ダークモードのスタイル */
body.dark {
    background-color: rgb(var(--dark-bg));
    color: rgb(var(--dark-color));
}

/* デフォルトのライトモードのスタイル */
body {
  background-color: rgb(var(--light-bg));
  color: rgb(var(--light-color));
}
</style>

まとめ

基本的には2.方法で実装しているサイトが多いイメージです。
状況に応じて、二つの方法のどちらかを使うまたは、組み合わせて使いましょう。