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（および最新のv5.3以降）では、data-bs-theme という専用の「属性」を利用して、Webサイト全体の配色を一瞬で切り替えることができます。

この仕組みをプログラミング未経験の方に分かりやすく例えると、「Webサイトという建物に、昼モード（ライト）と夜モード（ダーク）の照明スイッチを設置する」ようなイメージです。HTMLの最上部にある <html> タグに data-bs-theme="dark" と書き加えるだけで、ボタンの色や背景、文字色が自動的にダークモード専用の配色へと最適化されます。

まずは、最もシンプルな「ダークモード固定」のサンプルコードを見てみましょう。これを応用することで、スイッチ一つで「ライト」と「ダーク」を自由に行き来する動的なサイトが作れるようになります。


<div class="p-4 border rounded" data-bs-theme="dark" style="background-color: var(--bs-body-bg);">
    <h3 class="h5 text-body">ダークモードのプレビュー</h3>
    <p class="text-body-secondary">
        このエリアはBootstrapのテーマ機能によって、背景が暗く、文字が白く自動調整されています。
    </p>
    <button class="btn btn-primary">メインボタン</button>
    <button class="btn btn-outline-info">サブボタン</button>
    
    <div class="mt-3">
        <img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-thumbnail">
    </div>
</div>

ブラウザ表示

【ここがポイント！】
従来はCSSを何百行も書いて色を指定し直す必要がありましたが、現在のBootstrapではこの「属性」を1つ書き換えるだけでOK。専門的な知識がなくても、モダンで見やすいUI（ユーザーインターフェース）が手軽に実現できるのが最大の特徴です。

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

Webサイトの利便性を高める「ダークモード」への切り替え機能を実装しましょう。まずは、ユーザーがクリックしてテーマを操作するためのスイッチボタンをHTMLで作成します。

プログラミングが初めての方でも、Bootstrapというツール（フレームワーク）を使えば、難しいデザイン設定なしで整ったボタンをすぐに設置できます。今回は、見た目に分かりやすいアイコン付きのボタンを作成し、クリックした際に「ライトモード」と「ダークモード」が交互に切り替わる仕組みを準備します。


<!DOCTYPE html>
<html lang="ja" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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="container py-5">
    <div class="card p-4 shadow-sm">
        <h3 class="h5 mb-3">表示設定</h3>
        <p class="text-muted small">下のボタンを押すと、画面の色合いが切り替わります。</p>
        
        <button id="themeToggle" class="btn btn-outline-primary d-inline-flex align-items-center gap-2">
            <i class="bi bi-moon-stars-fill"></i>
            <span id="themeText">ダークモードへ切り替え</span>
        </button>
    </div>

    <script>
        const btn = document.getElementById("themeToggle");
        const themeText = document.getElementById("themeText");
        const html = document.documentElement;

        // ブラウザの保存機能（localStorage）から前回の設定を読み込む
        const savedTheme = localStorage.getItem("theme");
        if (savedTheme) {
            html.setAttribute("data-bs-theme", savedTheme);
            updateButtonUI(savedTheme);
        }

        // ボタンをクリックした時の処理
        btn.addEventListener("click", () => {
            const currentTheme = html.getAttribute("data-bs-theme");
            const nextTheme = currentTheme === "light" ? "dark" : "light";
            
            // ページ全体のテーマを変更
            html.setAttribute("data-bs-theme", nextTheme);
            // ユーザーの設定をブラウザに保存
            localStorage.setItem("theme", nextTheme);
            // ボタンの見た目を更新
            updateButtonUI(nextTheme);
        });

        // ボタンの文字やアイコンを切り替える関数
        function updateButtonUI(theme) {
            if (theme === "dark") {
                btn.innerHTML = '<i class="bi bi-sun-fill"></i> ライトモードへ切り替え';
                btn.className = "btn btn-outline-warning d-inline-flex align-items-center gap-2";
            } else {
                btn.innerHTML = '<i class="bi bi-moon-stars-fill"></i> ダークモードへ切り替え';
                btn.className = "btn btn-outline-primary d-inline-flex align-items-center gap-2";
            }
        }
    </script>
</body>
</html>

ブラウザ表示

ポイント：
このコードでは、Bootstrap 5の標準機能である data-bs-theme 属性を操作しています。JavaScriptを使ってHTMLの最上部（htmlタグ）にこの属性を付与するだけで、背景色や文字色が自動的に最適化されるのが特徴です。

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

せっかくダークモードに切り替えても、ページを移動したり再読み込み（リフレッシュ）したりするたびに元の画面に戻ってしまうと、ユーザーは何度もスイッチを押さなければなりません。これでは「使い勝手が悪いサイト」という印象を与えてしまいます。

そこで活用するのが、ブラウザに備わっている「localStorage（ローカルストレージ）」というデータの保存箱です。ここに「現在はダークモードである」という情報を書き込んでおくことで、ブラウザを閉じても設定が維持されます。ユーザーの好みを記憶し、次回の訪問時も快適な環境を自動で提供できるため、サイトの利便性（UX）を向上させるために欠かせない機能です。

【初心者向け解説】localStorageとは？
JavaScriptを使って、ユーザーのブラウザ内に小さなテキストデータを保存する仕組みです。有効期限がないため、意図的に削除しない限り、半永久的に設定を保存しておくことができます。

localStorageの仕組みを体験してみよう

まずは、ボタンを押したときに「入力した名前」をブラウザの保存箱に覚えさせる簡単なサンプルを見てみましょう。


<div class="p-3 border rounded bg-light">
    <p id="greeting">まだ名前を覚えていません</p>
    <input type="text" id="userName" placeholder="名前を入力してください" class="form-control mb-2">
    <button onclick="saveName()" class="btn btn-primary btn-sm">名前を保存する</button>
</div>

<script>
    // ページを読み込んだときに、保存されている名前があるか確認
    const savedName = localStorage.getItem('user_profile_name');
    if (savedName) {
        document.getElementById('greeting').innerText = savedName + "さん、こんにちは！";
    }

    function saveName() {
        const name = document.getElementById('userName').value;
        if (name) {
            // localStorageに「user_profile_name」という名前で保存
            localStorage.setItem('user_profile_name', name);
            document.getElementById('greeting').innerText = name + "さんの名前を保存しました！再読み込みしても消えません。";
        }
    }
</script>

ブラウザ表示

この「名前の保存」と同じ原理で、テーマの「ライト」や「ダーク」という情報を保存します。これにより、ユーザーが一度選んだテーマをずっと使い続けることができるようになるのです。

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

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

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

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

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

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

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