Bootstrapでテーマ切替スイッチを実装！初心者向けダークモード完全ガイド

テーマ切替スイッチ（トグル）をJS最小コードで実装【保存あり】

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapでサイトの見た目を切り替える方法ってありますか？例えば、昼は明るいデザイン、夜は暗いデザインにしたいんです。」

先生

「はい、それがダークモードとライトモードの切り替えですね。Bootstrapにはテーマ切替を簡単に実装できる仕組みがありますよ。」

生徒

「ボタンを押すとデザインが切り替わるようにしたいんですけど、難しいプログラムが必要ですか？」

先生

「大丈夫です。最小限のJavaScript（ジャバスクリプト）を使えば、誰でもすぐに切替スイッチを作れますよ。さらに設定を保存しておけば、次にページを開いたときも切替状態が保たれます。」

1. ダークモードとライトモードとは？

Webサイトのデザインには、大きく分けて「ライトモード」と「ダークモード」の2種類があります。ライトモードは白や明るい色を基調とした従来の標準的なデザインで、紙の資料のように読みやすいのが特徴です。

対してダークモードは、背景に黒や濃いグレーを採用し、文字を白っぽく表示するスタイルです。2026年現在のWeb制作では、ユーザーの視聴環境に配慮した「目に優しい設計」として、この両方を切り替えられる機能がほぼ必須のスキルとなっています。

ダークモードの主なメリット：

目の疲れを軽減： 暗い場所で画面を見た際、眩しさを抑え、眼精疲労を和らげます。
バッテリーの節約： 有機EL（OLED）ディスプレイを搭載したスマホでは、黒を表示する際の消費電力が少ないため電池が長持ちします。
モダンな印象： クールでスタイリッシュな視覚効果を与え、サイトの高級感を演出できます。

プログラミング未経験の方でも、まずは以下の簡単なサンプルを見て「色の反転」がどのようなイメージか確認してみましょう。


<div class="p-3 mb-2" style="background-color: #ffffff; color: #212529; border: 1px solid #dee2e6;">
    <h5>ライトモード</h5>
    <p>明るい背景に暗い文字。昼間の屋外や明るい部屋で見やすい設定です。</p>
</div>

<div class="p-3" style="background-color: #212529; color: #f8f9fa;">
    <h5>ダークモード</h5>
    <p>暗い背景に明るい文字。夜間や寝室などの暗い環境で目に負担をかけません。</p>
</div>

ブラウザ表示

Bootstrap 5以降を使用すると、自分で細かな色指定をしなくても、システム側で用意された「テーマ機能」を呼び出すだけで、これらの切り替えが驚くほどスムーズに行えるようになります。

2. Bootstrapでテーマ切替スイッチを作る仕組み

Bootstrap 5では、data-bs-theme という属性を使って全体のテーマを指定できます。この属性に「light」や「dark」を切り替えるだけで、デザインが変わる仕組みです。プログラミング初心者でも理解しやすいように、シンプルに説明すると「服を着替えるようにテーマを切り替える」イメージです。

3. HTMLでテーマ切替スイッチを設置する

まずはスイッチボタンをHTMLで作ります。Bootstrapのボタンを使うと見た目もきれいで、初心者でもすぐに実装できます。


<!DOCTYPE html>
<html lang="ja" data-bs-theme="light">
<head>
  <meta charset="UTF-8">
  <title>テーマ切替のサンプル</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body class="p-3">
  <button id="themeToggle" class="btn btn-primary">
    <i class="bi bi-moon"></i> ダークモード切替
  </button>

  <script>
    const btn = document.getElementById("themeToggle");
    const html = document.documentElement;
    const savedTheme = localStorage.getItem("theme");
    if(savedTheme){
      html.setAttribute("data-bs-theme", savedTheme);
    }
    btn.addEventListener("click", () => {
      const current = html.getAttribute("data-bs-theme");
      const next = current === "light" ? "dark" : "light";
      html.setAttribute("data-bs-theme", next);
      localStorage.setItem("theme", next);
    });
  </script>
</body>
</html>

ブラウザ表示

4. JavaScriptで保存機能を追加する理由

スイッチを押してテーマが切り替わっても、ページを再読み込みすると元に戻ってしまうと不便です。そこで「localStorage（ローカルストレージ）」というブラウザの保存箱にテーマの状態を記録します。これにより、次回開いたときも同じテーマで表示されるので、利用者に優しい設計になります。

5. 初心者でも理解できるテーマ切替の流れ

テーマ切替の流れを生活に例えると分かりやすいです。例えば、朝はカーテンを開けて明るく過ごす（ライトモード）、夜はカーテンを閉めて暗く過ごす（ダークモード）、というイメージです。その選択を部屋のノートに書き残しておけば、次の日も同じように過ごせる。これがlocalStorageでテーマを保存する仕組みと似ています。

6. デザインや使い方の応用

スイッチのデザインはBootstrapのクラスを変えるだけで簡単に調整できます。例えば、ボタンを丸くしたり、アイコンを太陽や月に変えたりすることも可能です。実際に運用する際は、ユーザーが直感的に「切り替えできる」と分かるようなデザインにすると使いやすいでしょう。

7. ダークモードが求められる理由

最近のWebサイトやアプリでダークモードが標準的に導入されるのには理由があります。目の疲れを軽減する、バッテリー消費を抑える、夜間の視認性を向上させるなど、多くのメリットがあります。特にスマートフォン利用者にとっては重要な機能ですので、Bootstrapでサイトを作る際は積極的に取り入れることをおすすめします。

2026年最新スキルアップ・実践セミナー