ダークモードを実装する方法

記事に記載したコードは、スキンに追加されています。

はじめに
完成イメージ
実装手順
- 解説
さいごに

はじめに

近年、多くのWebサイトやアプリで「ダークモード」が採用されています。
ダークモードを使用すると、黒を基調としたデザインになり、目の負担を軽減したり、バッテリー消費を抑えたりするメリットがあります。

@media (prefers-color-scheme: dark) {
}

@media (prefers-color-scheme: light) {
}

CSSのメディアクエリを利用してデバイスの設定に応じた自動切り替えもできますが、切り替えボタンを設置して手動で変更できるようにします。
また、ローカルストレージを活用して、前回の設定を保持する仕組みも実装します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

ラベル

JavaScriptを追加

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  const btn = $('#btn-dark-mode');

  if (localStorage.getItem('my_dark_mode') === 'dark') {
    $('body').addClass('dark-mode');
    btn.prop('checked', true);
  } else {
    $('body').removeClass('dark-mode');
  }

  // ボタンクリックの場合
  btn.click(function () {
    $('body').toggleClass('dark-mode');

    // ダーク・ライトのモードを判別してローカルストレージに保存
    if ($('body').hasClass('dark-mode')) {
      localStorage.setItem('my_dark_mode', 'dark');
    } else {
      localStorage.setItem('my_dark_mode', 'light');
    }
  });
});

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

#btn-dark-mode {
  display: none;
}

.mode__switch::before {
  content: '\f0eb';
  font-family: 'Font Awesome 5 Free';
}

#btn-dark-mode:checked + .mode__switch::before {
  font-weight: 900;
}

ラベル

HTMLを追加

以下のコードを「カスタムHTML」ウィジェットに入力します。

<div class="mode">
  <input type="checkbox" name="dark-mode" id="btn-dark-mode">
  <label for="btn-dark-mode" class="mode__switch"></label>
</div>

解説

ボタンのクリックに応じて <body>タグにCSSクラスdark-modeクラスを追加または削除します。
また、ダークモードが有効な場合、ローカルスレージのmy_dark_modeにdarkを保存します。

<body>タグにCSSクラスdark-modeあるかどうかに応じて、各要素のCSSプロパティを切り替え、画面の配色を変更します。

さいごに

今回紹介した方法を使えば、Webサイトにダークモードを簡単に追加し、ユーザーが好みに応じて切り替えられるようになります。
さらに、設定をローカルスレージに保存することで、次回の訪問時にもダークモードの状態を維持できます。

ダークモード切り替え機能

本スキンでは、フッタークレジット横に手動の「ダークモード」切り替えボタンを設置し、サイトカラー設定と連携した表示色の最適化により、夜間や暗い環境下でも視認性を高めた快適な閲覧環境を実現します。