Dark Mode Switch でダークモード対応

Dark Mode Switch というJavaScriptのライブラリを使って本サイトのダークモード対応をしました。 README.md に書いてある通りに実装するだけで簡単にできます。

README.md の内容丸パクリですが、実装の仕方を残しておきます。

必須条件

• Bootstrap 4.x or 5.x

使い方

1. ダークモードトグル用のカスタムスイッチを追加し、続いて dark-mode-switch.min.js スクリプトを追加します。 Bootstrap 4.x

   <div class="custom-control custom-switch">
     <input type="checkbox" class="custom-control-input" id="darkSwitch" />
     <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
   </div>
   <script src="dark-mode-switch.min.js"></script>
   

   Bootstrap 5.x

   <div class="form-check form-switch">
     <input type="checkbox" class="form-check-input" id="darkSwitch" />
     <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
   </div>
   <script src="dark-mode-switch.min.js"></script>
   

2. dark-mode.css をサイトに合わせて編集します。

dark-mode.css の編集

ダークモードをオンにすると、bodyタグに data-theme="dark" が追加されます。CSSを使ってページ内の要素を対象にすると、次のようになります。

[data-theme="dark"] {
  background-color: #111 !important;
  color: #eee;
}