Bootstrap: ダークモード

Q: カスタムCSSをテーマに追従させるにはどうすればいいですか？

CSS変数を使用します： [data-bs-theme="dark"] セレクター内でカスタム変数をオーバーライドするか、 var(--bs-body-bg) のようなBootstrapのテーマ変数を参照します。

Q: ページの一部だけにダークモードを適用できますか？

はい。 data-bs-theme="dark" は任意のHTML要素に適用でき、内部のコンテンツにのみ影響します。テストでは、セクショナルなダーク + グローバルなライトを混在させることができます。

Q: サードパーティコンポーネントライブラリ（日付ピッカー、リッチテキストエディタなど）をダークモードに適応させるにはどうすればいいですか？

サードパーティのコンポーネントには通常ダークスタイルは含まれていません。3つの解決策があります：(1) [data-bs-theme="dark"] 内でCSS変数をオーバーライドする；(2) 組み込みのテーマAPI（例：Flatpickrの theme: "dark" ）を使用する；(3) BootstrapのダークCSS変数を参照として、ダーク用のオーバーライドスタイルを手動で書きます。

最終更新：2026-08-26

1. コース紹介

(1) 前提条件

Bootstrap Sass カスタマイズフロー (レッスン 20)
CSS カスタムプロパティ (CSS 変数) の基礎
JavaScript DOM 操作の基礎

(2) 🎯 学習内容

data-bs-theme 属性を使用してダークモードを有効にする
テーマ切替ボタン + localStorage による設定の永続化を実装する
システムの prefers-color-scheme 設定に自動的に追従する
ダークモードの CSS 変数をカスタマイズする
ダークモードでの画像やコンポーネントの適応テクニックをマスターする

(3) 痛点

Charlie の管理ダッシュボードには「日/夜モード」切替ボタンが必要です。従来の実装方法では、各コンポーネントに2セットのスタイルを書く必要があり、メンテナンスコストが非常に高く、切り替え時にスタイルの漏れが発生しやすいです。

(4) 解決策

Bootstrap 5.3 ではネイティブのダークモードサポートが導入されています。data-bs-theme="dark" 属性を使用すると、ページ全体または個々のコンポーネントをライト/ダークテーマ間で切り替えることができ、すべてのコンポーネントスタイルが自動的に適応します。グローバルなテーマ切り替えは、たった一つの属性変更で実現できます。

(5) 利点

Charlie は切替ボタンを追加するだけで済みます。data-bs-theme 属性の変更一つでグローバルなテーマ切り替えが可能になり、ダーク用のオーバーライドスタイルを手動で書くことなく、すべてのコンポーネントスタイルがダークモードに自動適応します。

2. 基本的なダークモード

▶ サンプル基本ダークモードデモ

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <!-- Light mode section -->
    <h5>Light Mode (default)</h5>
    <div class="card p-3 mb-3">
      <p>This card uses the default light theme.</p>
      <button class="btn btn-primary">Button</button>
    </div>

    <!-- Dark mode section -->
    <div data-bs-theme="dark">
      <h5>Dark Mode</h5>
      <div class="card p-3 mb-3">
        <p>This card automatically adapts to dark theme.</p>
        <button class="btn btn-primary">Button</button>
        <div class="alert alert-warning mt-2">Alert also adapts.</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ 試してみよう

3. 3つのスコープ

スコープ	構文	説明
グローバル	`<html data-bs-theme="dark">`	ページ全体がダークモードになります
セクション	`<div data-bs-theme="dark">`	指定されたコンテナ内のコンポーネントがダークになります
コンポーネント	`<div class="card" data-bs-theme="dark">`	単一のカードがダークになります

HTML

<!-- Global dark mode -->
<html data-bs-theme="dark">
  <!-- all components use dark theme -->
</html>

▶ 試してみよう

4. テーマ切替ボタン

HTML

<button id="themeToggle" class="btn btn-outline-primary">
  <i class="bi bi-moon"></i> Dark Mode
</button>

<script>
  const toggle = document.getElementById('themeToggle')
  toggle.addEventListener('click', () => {
    const html = document.documentElement
    const current = html.getAttribute('data-bs-theme')
    const next = current === 'dark' ? 'light' : 'dark'
    html.setAttribute('data-bs-theme', next)
    toggle.innerHTML = next === 'dark'
      ? '<i class="bi bi-sun"></i> Light Mode'
      : '<i class="bi bi-moon"></i> Dark Mode'
  })
</script>

▶ 試してみよう

(1) ユーザー設定を記憶する

HTML

<script>
  // Check saved preference on load
  const saved = localStorage.getItem('theme')
  if (saved) {
    document.documentElement.setAttribute('data-bs-theme', saved)
  }

  document.getElementById('themeToggle').addEventListener('click', () => {
    const html = document.documentElement
    const current = html.getAttribute('data-bs-theme') || 'light'
    const next = current === 'dark' ? 'light' : 'dark'
    html.setAttribute('data-bs-theme', next)
    localStorage.setItem('theme', next)
  })
</script>

▶ 試してみよう

5. システム設定への自動追従

HTML

<script>
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
  const saved = localStorage.getItem('theme')

  if (saved) {
    document.documentElement.setAttribute('data-bs-theme', saved)
  } else if (prefersDark.matches) {
    document.documentElement.setAttribute('data-bs-theme', 'dark')
  }

  // Listen for system theme change
  prefersDark.addEventListener('change', (e) => {
    if (!localStorage.getItem('theme')) {
      document.documentElement.setAttribute('data-bs-theme', e.matches ? 'dark' : 'light')
    }
  })
</script>

▶ 試してみよう

6. ダークモード用のCSS変数

Bootstrap 5.3 はテーマ切り替えに CSS カスタムプロパティを使用しています。CSS でダークモード変数を直接オーバーライドできます：

CSS

/* Custom dark mode colors */
[data-bs-theme="dark"] {
  --bs-body-bg: #1a1a2e;
  --bs-body-color: #e0e0e0;
  --bs-primary: #bb86fc;
  --bs-primary-rgb: 187, 134, 252;
  --bs-card-bg: #16213e;
  --bs-border-color: #2a2a4a;
}

▶ 試してみよう

(1) Sassアプローチ

SCSS

// scss/custom.scss
$enable-dark-mode: true;

// Override dark mode colors
$dark-bg: #1a1a2e;
$dark-card-bg: #16213e;
$primary-dark: #bb86fc;

// Import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

▶ 試してみよう

7. ダークモードの画像適応

HTML

<style>
.dark-show { display: none; }
[data-bs-theme="dark"] .dark-show { display: block; }
[data-bs-theme="dark"] .dark-hide { display: none; }
</style>
<img src="logo-light.png" class="dark-hide" alt="Logo light">
<img src="logo-dark.png" class="dark-show" alt="Logo dark">

▶ 試してみよう

8. 包括的な例

▶ サンプル完全なダークモード切替ページ

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Toggle Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="bi bi-moon-stars me-2"></i>Theme Demo</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav">
        <ul class="navbar-nav ms-auto align-items-center">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
          <li class="nav-item ms-2">
            <button id="themeToggle" class="btn btn-outline-primary btn-sm rounded-pill">
              <i class="bi bi-moon"></i> <span id="themeLabel">Dark</span>
            </button>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container py-5">
    <h1>Dark Mode Demo</h1>
    <p class="lead">Click the toggle button to switch between light and dark themes.</p>

    <div class="row g-4 mb-5">
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Card Component</h5>
          <p>Automatically adapts to theme.</p>
          <button class="btn btn-primary">Primary</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Alert Example</h5>
          <div class="alert alert-success mt-2">Success alert</div>
          <div class="alert alert-danger">Danger alert</div>
          <div class="alert alert-info">Info alert</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Form Elements</h5>
          <input type="text" class="form-control mb-2" placeholder="Input field">
          <select class="form-select mb-2"><option>Option 1</option></select>
          <div class="form-check"><input class="form-check-input" type="checkbox" id="ck"><label class="form-check-label" for="ck">Check me</label></div>
        </div>
      </div>
    </div>

    <div class="card p-4">
      <h5>Table</h5>
      <table class="table">
        <thead><tr><th>Name</th><th>Role</th><th>Status</th></tr></thead>
        <tbody>
          <tr><td>Alice</td><td>Admin</td><td><span class="badge bg-success">Active</span></td></tr>
          <tr><td>Bob</td><td>Editor</td><td><span class="badge bg-warning">Pending</span></td></tr>
          <tr><td>Charlie</td><td>Viewer</td><td><span class="badge bg-secondary">Inactive</span></td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <script>
    const toggle = document.getElementById('themeToggle');
    const label = document.getElementById('themeLabel');
    const icon = toggle.querySelector('i');

    function setTheme(theme) {
      document.documentElement.setAttribute('data-bs-theme', theme);
      localStorage.setItem('theme', theme);
      const isDark = theme === 'dark';
      label.textContent = isDark ? 'Dark' : 'Light';
      icon.className = isDark ? 'bi bi-moon' : 'bi bi-sun';
    }

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

    toggle.addEventListener('click', () => {
      const current = document.documentElement.getAttribute('data-bs-theme');
      setTheme(current === 'dark' ? 'light' : 'dark');
    });
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ 試してみよう

▶ サンプル Sassダークモード + CSS変数

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode + Sass</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --brand-primary: #6f42c1;
      --brand-accent: #e83e8c;
    }
    [data-bs-theme="dark"] {
      --brand-primary: #bb86fc;
      --brand-accent: #ff4081;
      --custom-bg: #1a1a2e;
      --custom-card-bg: #16213e;
    }
    .custom-section {
      background: var(--custom-bg, #f8f9fa);
      padding: 2rem;
      border-radius: 0.5rem;
    }
    .custom-card-css {
      background: var(--custom-card-bg, #ffffff);
      border: 1px solid var(--bs-border-color, #dee2e6);
      border-radius: 0.5rem;
      padding: 1.5rem;
    }
    .brand-icon { color: var(--brand-primary); font-size: 2rem; }
  </style>
</head>
<body>
  <div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h5>Sass + CSS Variables</h5>
      <button class="btn btn-outline-primary btn-sm" onclick="document.documentElement.setAttribute('data-bs-theme', document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark')">
        <i class="bi bi-arrow-repeat"></i> Toggle Theme
      </button>
    </div>

    <div class="custom-section">
      <h5>Custom Section</h5>
      <p>Background uses <code>--custom-bg</code> CSS variable, changes with theme.</p>
    </div>

    <div class="row g-3 mt-3">
      <div class="col-md-4">
        <div class="custom-card-css">
          <i class="bi bi-palette brand-icon d-block mb-2"></i>
          <h6>Brand Color</h6>
          <p class="text-body-secondary small">Primary: <code>--brand-primary</code> changes per theme.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Bootstrap Card</h5>
          <p class="text-body-secondary">Native dark mode support.</p>
          <button class="btn btn-primary">Button</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="custom-card-css">
          <i class="bi bi-heart brand-icon d-block mb-2"></i>
          <h6>Accent Color</h6>
          <p class="text-body-secondary small">Accent: <code>--brand-accent</code> for highlights.</p>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ 試してみよう

▶ サンプルダークモードの画像切り替え

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Image Switch</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h5>Image Switch for Dark Mode</h5>
      <button class="btn btn-outline-primary btn-sm rounded-pill" onclick="toggleTheme()">
        <i class="bi bi-moon"></i> Toggle
      </button>
    </div>

    <div class="row g-4">
      <div class="col-md-6">
        <div class="card p-4">
          <h5>方法1：カスタムCSSテーマ可視性</h5>
          <p class="text-body-secondary">Shows different image per theme.</p>
          <div class="text-center p-4 bg-light rounded-3">
            <i class="bi bi-sun-fill fs-1 text-warning dark-hide"></i>
            <i class="bi bi-moon-fill fs-1 text-primary dark-show"></i>
            <p class="mt-2 mb-0"><span class="dark-hide">☀️ Light Mode Image</span><span class="dark-show">🌙 Dark Mode Image</span></p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card p-4">
          <h5>Method 2: CSS Filter</h5>
          <p class="text-body-secondary">Invert colors for dark mode.</p>
          <div class="text-center p-4 bg-light rounded-3">
            <img src="https://via.placeholder.com/200x100/0d6efd/fff?text=Logo" class="img-fluid dark-invert" alt="Logo" style="max-width:200px;">
          </div>
          <style>
            [data-bs-theme="dark"] .dark-invert {
              filter: invert(0.85) hue-rotate(180deg);
            }
          </style>
        </div>
      </div>
    </div>

    <div class="card p-4 mt-3">
      <h5>Method 3: picture element</h5>
      <div class="text-center">
        <picture>
          <source srcset="https://via.placeholder.com/400x100/1a1a2e/bb86fc?text=Dark+Logo" media="(prefers-color-scheme: dark)" id="darkSource">
          <img src="https://via.placeholder.com/400x100/0d6efd/fff?text=Light+Logo" class="img-fluid rounded-3" alt="Responsive Logo" style="max-width:400px;">
        </picture>
      </div>
    </div>
  </div>

  <script>
    function toggleTheme() {
      const html = document.documentElement;
      const next = html.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
      html.setAttribute('data-bs-theme', next);
    }
  </script>
</body>
</html>

▶ 試してみよう

▶ サンプル部分的なダークモードページ

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Partial Dark Mode</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Sectional Dark Mode Demo</h5>
    <p class="text-body-secondary">Different sections of the same page use different themes.</p>

    <!-- Light card -->
    <div class="row g-4">
      <div class="col-md-6">
        <div data-bs-theme="light">
          <div class="card p-4 border-0 shadow-sm">
            <h5>☀️ Light Section</h5>
            <p>This section stays light regardless of global theme.</p>
            <div class="d-flex gap-2">
              <button class="btn btn-primary">Primary</button>
              <button class="btn btn-outline-secondary">Secondary</button>
            </div>
            <div class="alert alert-info mt-3">Light mode alert</div>
            <table class="table table-striped mt-3">
              <thead><tr><th>Item</th><th>Value</th></tr></thead>
              <tbody><tr><td>Alpha</td><td>100</td></tr><tr><td>Beta</td><td>200</td></tr></tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Dark card -->
      <div class="col-md-6">
        <div data-bs-theme="dark">
          <div class="card p-4 border-0 shadow-sm">
            <h5>🌙 Dark Section</h5>
            <p>This section stays dark — useful for dashboards.</p>
            <div class="d-flex gap-2">
              <button class="btn btn-primary">Primary</button>
              <button class="btn btn-outline-secondary">Secondary</button>
            </div>
            <div class="alert alert-info mt-3">Dark mode alert</div>
            <table class="table table-striped mt-3">
              <thead><tr><th>Item</th><th>Value</th></tr></thead>
              <tbody><tr><td>Alpha</td><td>100</td></tr><tr><td>Beta</td><td>200</td></tr></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Mixed card: components with individual themes -->
    <h5 class="mt-5">Component-Level Themes</h5>
    <div class="d-flex gap-3 flex-wrap">
      <div class="card p-3" data-bs-theme="light" style="width:200px;">
        <h6>Light Card</h6>
        <button class="btn btn-primary btn-sm">Button</button>
      </div>
      <div class="card p-3" data-bs-theme="dark" style="width:200px;">
        <h6>Dark Card</h6>
        <button class="btn btn-primary btn-sm">Button</button>
      </div>
      <div class="card p-3" style="width:200px;">
        <h6>📕 Follows Global</h6>
        <button class="btn btn-primary btn-sm">Button</button>
      </div>
    </div>
  </div>
</body>
</html>

▶ 試してみよう

(1) ダークモードシステムアーキテクチャ

graph TD
    subgraph "Theme Sources"
        A1[User Clicks Toggle Button]
        A2[System Preference matchMedia]
        A3[localStorage Storage]
    end

    subgraph "Theme Application"
        B[data-bs-theme attribute]
        C[CSS Variable Switch]
        D[Component Style Redraw]
    end

    subgraph "Theme Detection"
        E[window.matchMedia<br/>prefers-color-scheme]
        F[getAttribute<br/>data-bs-theme]
        G[localStorage.getItem]
    end

    A1 --> B
    A2 --> B
    A3 --> B
    B --> C
    C --> D

    E --> A2
    F --> A1
    G --> A3

(2) ダークモードCSS変数テーブル

変数名	ライトデフォルト	ダークデフォルト	用途
`--bs-body-bg`	`#fff`	`#212529`	ページ背景色
`--bs-body-color`	`#212529`	`#dee2e6`	ボディテキストの色
`--bs-card-bg`	`#fff`	`#2b3035`	カードの背景色
`--bs-border-color`	`#dee2e6`	`#495057`	ボーダーの色
`--bs-primary`	`#0d6efd`	`#6ea8fe`	テーマのプライマリカラー
`--bs-secondary`	`#6c757d`	`#adb5bd`	セカンダリカラー
`--bs-navbar-color`	`rgba(0,0,0,0.55)`	`rgba(255,255,255,0.55)`	ナビゲーションバーのテキスト色

(3) テーマ検出メソッド比較表

方法	実装	利点	欠点	推奨シナリオ
手動ユーザー切替	JS + `localStorage`	ユーザー制御、設定の永続化	追加のUI要素が必要	すべてのアプリケーション
システム自動追従	`matchMedia('prefers-color-scheme')`	シームレスな適応、モダンブラウザサポート	オフラインで切り替え不可	ニュースサイト、ブログ
時間ベース自動切替	JSが現在時刻を確認	夜に自動的にダークに	ユーザー設定と一致しない場合あり	読書アプリケーション
URLパラメータ + Cookie	サーバーサイド読み込み	初回読み込み時にコンテンツのフラッシュなし	実装が複雑	SEO重要なページ

(4) CSS `color-scheme` プロパティテーブル

プロパティ値	効果	説明
`color-scheme: light`	ブラウザはライトなスクロールバーとフォームコントロールを使用	デフォルト値
`color-scheme: dark`	ブラウザはダークなスクロールバーとフォームコントロールを使用	ダークモードと併用する場合
`color-scheme: light dark`	ブラウザがシステム設定に基づいて自動的に選択	グローバル設定として推奨
`color-scheme: normal`	スキームが設定されていない	ブラウザが決定
`<meta name="color-scheme" content="light dark">`	HTMLヘッダーで宣言	CSSなしで迅速なグローバル設定

❓ よくある質問

Q ダークモードはすべてのBootstrapコンポーネントで機能しますか？

A はい。カード、ナビバー、フォーム、テーブル、アラート、モーダルなど、すべての公式コンポーネントにダークスタイルがプリセットされています。サードパーティのプラグインにはそれぞれの適応が必要な場合があります。

Q カスタムCSSをテーマに追従させるにはどうすればいいですか？

A CSS変数を使用します：[data-bs-theme="dark"] セレクター内でカスタム変数をオーバーライドするか、var(--bs-body-bg) のようなBootstrapのテーマ変数を参照します。

Q ページの一部だけにダークモードを適用できますか？

A はい。data-bs-theme="dark" は任意のHTML要素に適用でき、内部のコンテンツにのみ影響します。テストでは、セクショナルなダーク + グローバルなライトを混在させることができます。

Q ダークモードはページパフォーマンスに影響しますか？

A 影響は最小限です。ダークモードはCSS変数の値を切り替えるだけで、追加のHTTPリクエストや再描画オーバーヘッドは発生しません。localStorage を使用した設定の保存は同期操作です。注意点は、matchMedia を使用してシステムテーマの変更を監視する場合、コールバック関数は複雑な計算を避けて軽量に保つ必要があります。

Q サードパーティコンポーネントライブラリ（日付ピッカー、リッチテキストエディタなど）をダークモードに適応させるにはどうすればいいですか？

A サードパーティのコンポーネントには通常ダークスタイルは含まれていません。3つの解決策があります：(1) [data-bs-theme="dark"] 内でCSS変数をオーバーライドする；(2) 組み込みのテーマAPI（例：Flatpickrの theme: "dark"）を使用する；(3) BootstrapのダークCSS変数を参照として、ダーク用のオーバーライドスタイルを手動で書きます。

📖 まとめ

data-bs-theme="dark" はダークモードを有効にし、html、コンテナ、またはコンポーネントに適用します
テーマ切り替え：JSが data-bs-theme 属性を変更 + localStorage が設定を保存
システム設定：matchMedia('prefers-color-scheme: dark') が自動的に追従
CSS変数のオーバーライド：[data-bs-theme="dark"] { --bs-body-bg: ... }
画像：[data-bs-theme] セレクタを使ったカスタムCSSが異なるテーマ下での可視性を制御

📝 練習問題

⭐ レッスン19のエンタープライズサイトにダークモード切替ボタンを追加してください。ボタンはグローバルテーマを切り替え、設定は localStorage に保存されるようにします。
⭐⭐ ブランド用ダーク変数をカスタマイズしてください：背景色 #0d1117 (GitHubスタイル)、カード背景色 #161b22、プライマリカラー #58a6ff。
⭐⭐⭐ 同じページにライトカードとダークカードの両方を表示し（それぞれ data-bs-theme を設定）、テキスト色、背景、ボーダー、ボタンの違いを比較してください。

前のレッスン: Sassカスタマイズ · 次のレッスン: パフォーマンス最適化とビルドデプロイ

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて

Bootstrap: ダークモード

1. コース紹介

(1) 前提条件

(2) 🎯 学習内容

(3) 痛点

(4) 解決策

(5) 利点

2. 基本的なダークモード

▶ サンプル 基本ダークモードデモ

3. 3つのスコープ

4. テーマ切替ボタン

(1) ユーザー設定を記憶する

5. システム設定への自動追従

6. ダークモード用のCSS変数

(1) Sassアプローチ

7. ダークモードの画像適応

8. 包括的な例

▶ サンプル 完全なダークモード切替ページ

▶ サンプル Sassダークモード + CSS変数

▶ サンプル ダークモードの画像切り替え

▶ サンプル 部分的なダークモードページ

(1) ダークモードシステムアーキテクチャ

(2) ダークモードCSS変数テーブル

(3) テーマ検出メソッド比較表

(4) CSS color-scheme プロパティテーブル

❓ よくある質問

📖 まとめ

📝 練習問題

▶ サンプル基本ダークモードデモ

▶ サンプル完全なダークモード切替ページ

▶ サンプルダークモードの画像切り替え

▶ サンプル部分的なダークモードページ

(4) CSS `color-scheme` プロパティテーブル