はじめに

Bootstrap v5.3では、標準機能としてダークモードが実装されています。
以前のバージョンではCSSを自作して対応する必要がありましたが、v5.3以降では data-bs-theme を利用することで簡単にテーマを切り替えできます。

この記事では、ダークモード実装方法を紹介します。

目次

1. Bootstrap v5.3のダークモードについて

Bootstrap v5.3では、data-bs-theme の値によってテーマが切り替わります。

例えば以下のように設定すると、Bootstrap側で用意されている配色へ自動的に切り替わります。

 <html data-bs-theme="dark">

Bootstrapのカードやフォーム、テーブルなどのコンポーネントは、Bootstrap側でテーマ対応されています。
そのため、独自CSSを大量に書かなくてもダークモードへ対応できます。

公式ドキュメントはこちら
https://getbootstrap.com/docs/5.3/customize/color-modes/

2. HTMLを作成する

今回はスイッチでダークモードの切り替えをできるように作成します。

<!doctype html>
<!-- data-bs-themeでダークモード対応 -->
<html lang="ja" data-bs-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
</head>
<body>
  <div class="container py-5">
    <div class="d-flex align-items-center gap-2 mb-4">
      <span>ダークモード</span>
      <div class="form-check form-switch m-0">
        <input class="form-check-input" type="checkbox" id="themeSwitch" >
      </div>
    </div>
    <h1 class="mb-3">サンプルページ</h1>
    <p>ダークモード実装例です。</p>
    <div class="card">
      <h5 class="card-header">カードヘッダー</h5>
      <div class="card-body">
        <h5 class="card-title">カードボディ1</h5>
        <p class="card-text">カードボディ2</p>
        <a href="#" class="btn btn-primary">ボタン</a>
      </div>
    </div>
  </div>
</body>

この時点ではまだテーマは切り替わりません。
次にJavaScriptを追加します。

3. JavaScriptでテーマを切り替える

次に、スイッチ切り替え時に data-bs-theme を変更します。
localStorageを利用してページを再読み込みしてもテーマ状態が保持されるようにしています。
また、window.matchMedia を利用することでユーザーのOS設定がダークモードなら初期表示もダークモードになるようにしています。

<script>
document.addEventListener("DOMContentLoaded", () => { 
  const html = document.documentElement;
  const themeSwitch =
    document.getElementById("themeSwitch");

  const savedTheme = localStorage.getItem("theme") || 
    ( window.matchMedia(
      "(prefers-color-scheme: dark)" 
      ).matches ? "dark" : "light"
    ); setTheme(savedTheme);

 themeSwitch.addEventListener("change", () => {
    const nextTheme = 
      themeSwitch.checked ? "dark" : "light"; 
    setTheme(nextTheme); 
    localStorage.setItem( "theme", nextTheme ); 
  });
 
  function setTheme(theme){ 
    html.setAttribute( "data-bs-theme", theme ); 
    themeSwitch.checked = theme === "dark"; 
  } 
}); 
</script>

これでダークモードをスイッチで切り替えられるようになりました。
実際の画面は以下

ダークモードOFF

ダークモードON

4. ダークモード対応時の注意点

Bootstrapの多くのコンポーネントが自動でダークモード対応されます。
ただし、固定色を指定するとテーマ切り替えに対応できなくなるため注意が必要です。

例えば以下は常に黒文字になります。

 text-dark link-dark style="color:black"

また、独自CSSを書く場合も以下のようにBootstrap変数を利用すると、ダークモード対応しやすくなります。

 color: var(--bs-body-color); background-color: var(--bs-body-bg);

5. おわりに

Bootstrap v5.3では、かなり簡単にダークモードを実装できるようになりました。
特にBootstrapコンポーネントを中心に構成している場合は、data-bs-theme を切り替えるだけで多くのUIが自動対応されます。