メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

カラーモード(Color modes) v5.3.0新設

Bootstrapは、v5.3.0からカラーモード、つまりテーマに対応するようになった。デフォルトのライトカラーモードと新しいダークモード、またはテンプレートを使って独自のカラーモードを作成してみて下さい。

※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。

ダークモード(Dark mode)

Bootstrapがカラーモードに対応し、まずはダークモードについて。v5.3.0では独自のカラーモードの切替を実装することができ(Bootstrapの解説の例は以下を参照)、様々なカラーモードを自由に適用できる。ライトモード(デフォルト)とダークモードをサポートしている。カラーモードは、data-bs-theme 属性のおかげで <html> 要素でグローバルや特定のコンポーネントや要素で切り替えられる。

また、カラーモードmixinを使えば、メディアクエリによる実装に切り替えられる。詳細については使用方法の項目に記載。ただし、この場合は以下のようにコンポーネント単位でテーマを変更することはできないので注意。

実例(Example)

例えばドロップダウンメニューのカラーモードを変更するには、親要素の .dropdowndata-bs-theme="light"data-bs-theme="dark" を追加する。これでグローバルなカラーモードに関係なく、これらのドロップダウンは指定されたテーマ値で表示されるようになる。

見本
設定例
ライト(標準)モード<div class="dropdown" data-bs-theme="light">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
    デフォルトのドロップダウン
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
    <li><a class="dropdown-item active" href="#" aria-current="true">メニュー1</a></li>
    <li><a class="dropdown-item" href="#">メニュー2</a></li>
    <li><a class="dropdown-item" href="#">メニュー3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">その他リンク</a></li>
  </ul>
</div>
ダークモード<div class="dropdown" data-bs-theme="dark">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
    ダークのドロップダウン
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
    <li><a class="dropdown-item active" href="#" aria-current="true">メニュー1</a></li>
    <li><a class="dropdown-item" href="#">メニュー2</a></li>
    <li><a class="dropdown-item" href="#">メニュー3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">その他リンク</a></li>
  </ul>
</div>

※カラーモードによる見え方の違い ★はカラーモードによって色が異なる

ライトモード

標準カラー

文字色 .text-body
背景色 .bg-body
罫線色 .border
リンクの色 <a>
コードの色 <code>

二次Bodyカラー

文字色 .text-body-secondary
背景色 .bg-body-secondary

三次Bodyカラー

文字色 .text-body-tertiary
背景色 .bg-body-tertiary

強調文字カラー

文字色 .text-body-emphasis

Primaryテーマカラー

文字色 .text-primary
背景色 .bg-primary
文字&背景色 .text-bg-primary

淡いPrimaryテーマカラー

文字色 .text-primary-emphasis
背景色 .bg-primary-subtle
罫線色 .border-primary-subtle

Secondaryテーマカラー

文字色 .text-secondary
背景色 .bg-secondary
文字&背景色 .text-bg-secondary

淡いSecondaryテーマカラー

文字色 .text-secondary-emphasis
背景色 .bg-secondary-subtle
罫線色 .border-secondary-subtle

Successテーマカラー

文字色 .text-success
背景色 .bg-success
文字&背景色 .text-bg-success

淡いSuccessテーマカラー

文字色 .text-success-emphasis
背景色 .bg-success-subtle
罫線色 .border-success-subtle

Dangerテーマカラー

文字色 .text-danger
背景色 .bg-danger
文字&背景色 .text-bg-danger

淡いDangerテーマカラー

文字色 .text-danger-emphasis
背景色 .bg-danger-subtle
罫線色 .border-danger-subtle

Warningテーマカラー

文字色 .text-warning
背景色 .bg-warning
文字&背景色 .text-bg-warning

淡いWarningテーマカラー

文字色 .text-warning-emphasis
背景色 .bg-warning-subtle
罫線色 .border-warning-subtle

Infoテーマカラー

文字色 .text-info
背景色 .bg-info
文字&背景色 .text-bg-info

淡いInfoテーマカラー

文字色 .text-info-emphasis
背景色 .bg-info-subtle
罫線色 .border-info-subtle

Lightテーマカラー

文字色 .text-light
背景色 .bg-light
文字&背景色 .text-bg-light

淡いLightテーマカラー

文字色 .text-light-emphasis
背景色 .bg-light-subtle
罫線色 .border-light-subtle

Darkテーマカラー

文字色 .text-dark
背景色 .bg-dark
文字&背景色 .text-bg-dark

淡いDarkテーマカラー

文字色 .text-dark-emphasis
背景色 .bg-dark-subtle
罫線色 .border-dark-subtle

Blackカラー

文字色 .text-black
背景色 .bg-black

Whiteカラー

文字色 .text-white
背景色 .bg-white
ダークモード

標準カラー

文字色 .text-body
背景色 .bg-body
罫線色 .border
リンクの色 <a>
コードの色 <code>

二次Bodyカラー

文字色 .text-body-secondary
背景色 .bg-body-secondary

三次Bodyカラー

文字色 .text-body-tertiary
背景色 .bg-body-tertiary

強調文字カラー

文字色 .text-body-emphasis

Primaryテーマカラー

文字色 .text-primary
背景色 .bg-primary
文字&背景色 .text-bg-primary

淡いPrimaryテーマカラー

文字色 .text-primary-emphasis
背景色 .bg-primary-subtle
罫線色 .border-primary-subtle

Secondaryテーマカラー

文字色 .text-secondary
背景色 .bg-secondary
文字&背景色 .text-bg-secondary

淡いSecondaryテーマカラー

文字色 .text-secondary-emphasis
背景色 .bg-secondary-subtle
罫線色 .border-secondary-subtle

Successテーマカラー

文字色 .text-success
背景色 .bg-success
文字&背景色 .text-bg-success

淡いSuccessテーマカラー

文字色 .text-success-emphasis
背景色 .bg-success-subtle
罫線色 .border-success-subtle

Dangerテーマカラー

文字色 .text-danger
背景色 .bg-danger
文字&背景色 .text-bg-danger

淡いDangerテーマカラー

文字色 .text-danger-emphasis
背景色 .bg-danger-subtle
罫線色 .border-danger-subtle

Warningテーマカラー

文字色 .text-warning
背景色 .bg-warning
文字&背景色 .text-bg-warning

淡いWarningテーマカラー

文字色 .text-warning-emphasis
背景色 .bg-warning-subtle
罫線色 .border-warning-subtle

Infoテーマカラー

文字色 .text-info
背景色 .bg-info
文字&背景色 .text-bg-info

淡いInfoテーマカラー

文字色 .text-info-emphasis
背景色 .bg-info-subtle
罫線色 .border-info-subtle

Lightテーマカラー

文字色 .text-light
背景色 .bg-light
文字&背景色 .text-bg-light

淡いLightテーマカラー

文字色 .text-light-emphasis
背景色 .bg-light-subtle
罫線色 .border-light-subtle

Darkテーマカラー

文字色 .text-dark
背景色 .bg-dark
文字&背景色 .text-bg-dark

淡いDarkテーマカラー

文字色 .text-dark-emphasis
背景色 .bg-dark-subtle
罫線色 .border-dark-subtle

Blackカラー

文字色 .text-black
背景色 .bg-black

Whiteカラー

文字色 .text-white
背景色 .bg-white

使い方(How it works)

  • 上記のように、カラーモードスタイルは data-bs-theme 属性によって制御される。この属性は <html> 要素や他の要素やBootstrapコンポーネントに適用できる。もし <html> 要素に適用すれば全体に適用され、コンポーネントや要素に適用した場合は、その特定のコンポーネントや要素に適用される。
  • サポートしたい各カラーモードについて、共有のグローバルCSS変数を新しく再定義する必要がある。この作業はすでに _root.scss スタイルシートでダークモード用に行っており、ライトモードはデフォルト値になっている。カラーモード固有のスタイルを記述する場合はmixinを使用:
    // scss/_root.scssのカラーモード変数
    @include color-mode(dark) {
      // CSS変数の再定義はこちら...
    }
  • ダークモード用の共有グローバルCSS変数の再定義を行うため、カスタムの _variables-dark.scss を使用。このファイルは独自のカラーモードには必要ないが、Bootstrapのダークモードには2つの理由で必要。まずはグローバルカラーをリセットする場所を1つにし、次にアコーディオンやフォームコンポーネントなどのCSSに埋め込まれている背景画像用に、いくつかのSass変数を再定義する必要があったため。

カラーモードの入れ子(Nesting color modes)

入れ子にした要素に data-bs-theme を使用すると、要素やコンポーネントのグループのカラーモードを変更できる。以下の例では、外側のダークモードと入れ子になったライトモードがある。コンポーネントは自然にその外観を適応させられるが、各カラーモードに固有のスタイルを利用するために、途中でいくつかのユーティリティを追加しなければならない場合がある。

例えば、任意の <div>data-bs-theme="dark" を使用したにもかかわらず、その <div>background-color<body> に設定されているため背景色がない。このように colorbackground-color を適応させたい場合は、.text-body.bg-body を追加する必要がある。

見本

これは、常にダークテーマで表示する必要がある。

これは、常にライトテーマで表示する必要がある。

設定例
<div data-bs-theme="dark" class="p-3 text-body bg-body">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">カラーモード</a></li>
      <li class="breadcrumb-item active" aria-current="page">ダーク</li>
    </ol>
  </nav>

  <p>これは、常に<strong>ダーク</strong>テーマで表示する必要がある。</p>

  <div class="progress mb-4" role="progressbar" aria-label="基本の例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 25%"></div>
  </div>

  <div class="dropdown mb-4">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false">
      ダークドロップダウン
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
      <li><a class="dropdown-item active" href="#" aria-current="true">メニュー1</a></li>
      <li><a class="dropdown-item" href="#">メニュー2</a></li>
      <li><a class="dropdown-item" href="#">メニュー3</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">その他リンク</a></li>
    </ul>
  </div>

  <div data-bs-theme="light" class="p-3 text-body bg-body rounded">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">カラーモード</a></li>
        <li class="breadcrumb-item"><a href="#">ダーク</a></li>
        <li class="breadcrumb-item active" aria-current="page">ライト</li>
      </ol>
    </nav>

    <p>これは、常に<strong>ライト</strong>テーマで表示する必要がある。</p>

    <div class="progress mb-4" role="progressbar" aria-label="基本の例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar" style="width: 25%"></div>
    </div>

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight2" data-bs-toggle="dropdown" aria-expanded="false">
        ライトドロップダウン
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight2">
        <li><a class="dropdown-item active" href="#" aria-current="true">メニュー1</a></li>
        <li><a class="dropdown-item" href="#">メニュー2</a></li>
        <li><a class="dropdown-item" href="#">メニュー3</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">その他リンク</a></li>
      </ul>
    </div>
  </div>
</div>

使用方法(Usage)

ダークモードを有効にする(Enable dark mode)

<html> 要素に data-bs-theme="dark" 属性を追加して、プロジェクト全体で組み込みのダークカラーモードを有効にする。これにより、特定の data-bs-theme 属性が適用されているものを除いてすべてのコンポーネントと要素にダークカラーモードが適用される。
クイックスタート・テンプレートに基づいた構築:

設定例
<!doctype html>
<html lang="ja" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrapのデモ</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <h1>こんにちは!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrapにはまだカラーモードピッカーは組み込まれていないが、希望があれば、このサイトと同様のものを使用できる。詳細はJavaScriptの項目に記載。

Sassを使用した構築(Building with Sass)

新ダークモードオプションはBootstrapのすべてのユーザが使用できるが、メディアクエリの代わりにデータ属性を経由して制御され、プロジェクトのカラーモードは自動的に切り替わらない。Sassで $enable-dark-modefalse に変更すれば、ダークモードを完全に無効にできる。

カラーモードの適用方法を制御するには、カスタムSass mixinである color-mode() を使用。デフォルトでは、data 属性のアプローチを使用しており、サイト訪問者が自動的なダークモードを選択したり、好みをコントロールできるような、(Bootstrapのドキュメントのように)よりユーザーフレンドリーな体験を作ることができる。また、この方法は、様々なテーマやライトとダーク以外のカスタムカラーモードを追加するための簡単で拡張性のある方法。

メディアクエリを使用して、カラーモードのみを自動化したい場合は、Sass変数でMixinのデフォルトタイプを変更できる。以下でスニペットとコンパイル後のCSSの出力を見てみる。

Sass$color-mode-type: data;

@include color-mode(dark) {
  .element {
    color: var(--bs-primary-text);
    background-color: var(--bs-primary-bg-subtle);
  }
}

出力後:

CSS[data-bs-theme=dark] .element {
  color: var(--bs-primary-text);
  background-color: var(--bs-primary-bg-subtle);
}

また media-query に設定した場合。

Sass$color-mode-type: media-query;

@include color-mode(dark) {
  .element {
    color: var(--bs-primary-text);
    background-color: var(--bs-primary-bg-subtle);
  }
}

出力後:

CSS@media (prefers-color-scheme: dark) {
  .element {
    color: var(--bs-primary-text);
    background-color: var(--bs-primary-bg-subtle);
  }
}

カスタムカラーモード(Custom color modes)

カラーモードの主な使用例はライトモードとダークモードだが、カスタムのカラーモードも可能。カラーモードの名前としてカスタム値を指定して、独自の data-bs-theme セレクタを作成し、必要に応じてSassとCSSの変数を変更する。Bootstrapではダークモード専用のSass変数を格納するために、別途 _variables-dark.scss スタイルシートを作成することにしたが、これは使用者にとって必要なことではない。

例えば data-bs-theme="blue" セレクタで"青いテーマ"が作成できる。カスタムのSassかCSSファイルに新しいセレクタを追加し、必要に応じてグローバルかコンポーネントCSS変数を再定義する。Sassを使用すれば、再定義したCSS変数内でSassの関数を使用もできる。

Sass[data-bs-theme="blue"] {
  --bs-body-color: var(--bs-white);
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-blue);
  --bs-body-bg-rgb: #{to-rgb($blue)};
  --bs-tertiary-bg: #{$blue-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
    --bs-dropdown-link-active-bg: #{$blue-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
    --bs-btn-border-color: #{rgba($white, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($white, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($white, .5)};
    --bs-btn-focus-border-color: #{rgba($white, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}
見本
青いテーマの実例

青いテーマがどのように見えるかを、文章で表現したもの。


設定例
<div data-bs-theme="blue">
  ...
</div>

JavaScript

サイト訪問者やユーザーがカラーモードを切り替えられるようにするには、ルート要素である <html>data-bs-theme 属性を制御するための切替え要素を作成する必要がある。本サイトでは、最初はユーザーの現在のシステムのカラーモードに従うが、それを上書きして特定のカラーモードを選択するオプションを提供する切替ボタンを作成している。

ここでは、その動力源となるJavaScriptを紹介。BootstrapのコンポーネントのHTMLとCSSを使ってどのように実装されているか、本サイトのナビバーで自由に切り替えて調べてみて下さい。なおカラーモードにメディアクエリを使用する場合、暗黙的な制御を好むならJavaScriptの修正や削除をする必要があるかもしれない。

color-modes.js/*!
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 */

(() => {
  'use strict'

  const storedTheme = localStorage.getItem('theme')

  const getPreferredTheme = () => {
    if (storedTheme) {
      return storedTheme
    }

    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  }

  const setTheme = function (theme) {
    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.documentElement.setAttribute('data-bs-theme', 'dark')
    } else {
      document.documentElement.setAttribute('data-bs-theme', theme)
    }
  }

  setTheme(getPreferredTheme())

  const showActiveTheme = theme => {
    const themeSwitcher = document.querySelector('#bd-theme')
    const themeSwitcherText = document.querySelector('#bd-theme-text')
    const activeThemeIcon = document.querySelector('.theme-icon-active use')
    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')

    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
      element.classList.remove('active')
      element.setAttribute('aria-pressed', 'false')
    })

    btnToActive.classList.add('active')
    btnToActive.setAttribute('aria-pressed', 'true')
    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
    themeSwitcher.focus()
  }

  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    if (storedTheme !== 'light' || storedTheme !== 'dark') {
      setTheme(getPreferredTheme())
    }
  })

  window.addEventListener('DOMContentLoaded', () => {
    showActiveTheme(getPreferredTheme())

    document.querySelectorAll('[data-bs-theme-value]')
      .forEach(toggle => {
        toggle.addEventListener('click', () => {
          const theme = toggle.getAttribute('data-bs-theme-value')
          localStorage.setItem('theme', theme)
          setTheme(theme)
          showActiveTheme(theme)
        })
      })
  })
})()

color-modes.js を使用したカラーモードの切替(ドロップダウンの動作については本サイトのナビバーでご確認下さい):

設定例
HTML<!doctype html>
<html lang="ja" data-bs-theme="auto">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>カラーモード切替のデモ</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <!-- アイコンの設定 -->
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <symbol id="circle-half" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
      </symbol>
      <symbol id="moon-stars-fill" viewBox="0 0 16 16">
        <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
        <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
      </symbol>
      <symbol id="sun-fill" viewBox="0 0 16 16">
        <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
      </symbol>
    </svg>
    <h1>カラーモードの切替</h1>
    <p>適宜カラーモードを切り替えて下さい。</p>
    <!-- ドロップダウン -->
    <div class="btn-group">
      <button class="btn btn-primary dropdown-toggle" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown">
        <svg class="bi theme-icon-active" width="1em" height="1em" fill="currentColor"><use href="#moon-stars-fill"></use></svg>
        <span id="bd-theme-text">カラーモードの切替</span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="bd-theme-text">
        <li>
          <button type="button" class="dropdown-item" data-bs-theme-value="light" aria-pressed="false">
            <svg class="bi me-2 theme-icon" width="1em" height="1em" fill="currentColor"><use href="#sun-fill"></use></svg>ライト
          </button>
        </li>
        <li>
          <button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
            <svg class="bi me-2 theme-icon" width="1em" height="1em" fill="currentColor"><use href="#moon-stars-fill"></use></svg>ダーク
          </button>
        </li>
        <li>
          <button type="button" class="dropdown-item active" data-bs-theme-value="auto" aria-pressed="true">
            <svg class="bi me-2 theme-icon" width="1em" height="1em" fill="currentColor"><use href="#circle-half"></use></svg>オート
          </button>
        </li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <script src="js/color-modes.js"></script>
  </body>
</html>

CSS

CSS変数(Variables)

ダークモードの再定義として、ルートレベルのCSS変数が何十個も繰り返される。これらはカラーモードセレクタに範囲設定されており、デフォルトは data-bs-theme だが、prefers-color-scheme メディアクエリを使用するように設定できる。これらの変数は、独自の新しいカラーモードを生成するためのガイドラインとしてご使用下さい。

デフォルトの設定
scss/_root.scss 内 root-dark-mode-vars の設定--#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
--#{$prefix}body-bg: #{$body-bg-dark};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};

--#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};

--#{$prefix}secondary-color: #{$body-secondary-color-dark};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};

--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};

--#{$prefix}emphasis-color: #{$emphasis-color-dark};

--#{$prefix}primary-text: #{$primary-text-dark};
--#{$prefix}secondary-text: #{$secondary-text-dark};
--#{$prefix}success-text: #{$success-text-dark};
--#{$prefix}info-text: #{$info-text-dark};
--#{$prefix}warning-text: #{$warning-text-dark};
--#{$prefix}danger-text: #{$danger-text-dark};
--#{$prefix}light-text: #{$light-text-dark};
--#{$prefix}dark-text: #{$dark-text-dark};

--#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
--#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
--#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
--#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
--#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
--#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
--#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
--#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};

--#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark};
--#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark};
--#{$prefix}success-border-subtle: #{$success-border-subtle-dark};
--#{$prefix}info-border-subtle: #{$info-border-subtle-dark};
--#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark};
--#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark};
--#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
--#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};

--#{$prefix}heading-color: #{$headings-color-dark};

--#{$prefix}link-color: #{$link-color-dark};
--#{$prefix}link-hover-color: #{$link-hover-color-dark};
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};

--#{$prefix}code-color: #{$code-color-dark};

--#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};

Sass変数(Sass variables)

ダークカラーモード用のCSS変数は、_variables-dark.scss にあるダークモード専用のSass変数から部分的に生成される。またコンポーネント全体に使用されている埋め込みSVGの色を変更するため、いくつかのカスタム再定義も組み込まれている。

デフォルトの設定
scss/_variables-dark.scss 内 sass-dark-mode-vars の設定$primary-text-dark:                 $blue-300;
$secondary-text-dark:               $gray-300;
$success-text-dark:                 $green-300;
$info-text-dark:                    $cyan-300;
$warning-text-dark:                 $yellow-300;
$danger-text-dark:                  $red-300;
$light-text-dark:                   $gray-100;
$dark-text-dark:                    $gray-300;

$primary-bg-subtle-dark:            $blue-900;
$secondary-bg-subtle-dark:          $gray-900;
$success-bg-subtle-dark:            $green-900;
$info-bg-subtle-dark:               $cyan-900;
$warning-bg-subtle-dark:            $yellow-900;
$danger-bg-subtle-dark:             $red-900;
$light-bg-subtle-dark:              $gray-800;
$dark-bg-subtle-dark:               mix($gray-800, $black);

$primary-border-subtle-dark:        $blue-700;
$secondary-border-subtle-dark:      $gray-700;
$success-border-subtle-dark:        $green-700;
$info-border-subtle-dark:           $cyan-800;
$warning-border-subtle-dark:        $yellow-800;
$danger-border-subtle-dark:         $red-700;
$light-border-subtle-dark:          $gray-700;
$dark-border-subtle-dark:           $gray-800;

$body-color-dark:                   $gray-500;
$body-bg-dark:                      $gray-900;
$body-emphasis-color-dark:          $gray-100;
$body-secondary-color-dark:         rgba($body-color-dark, .75);
$body-secondary-bg-dark:            $gray-800;
$body-tertiary-color-dark:          rgba($body-color-dark, .5);
$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
$emphasis-color-dark:               $white;
$border-color-dark:                 $gray-700;
$border-color-translucent-dark:     rgba($white, .15);
$headings-color-dark:               #fff;
$link-color-dark:                   $blue-300;
$link-hover-color-dark:             $blue-200;
$code-color-dark:                   $pink-300;


//
// Forms
//

$form-select-indicator-color-dark:  $body-color-dark;
$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");

$form-switch-color-dark:            rgba($white, .25);
$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");


//
// Accordion
//

$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");

Sass mixin

ダークモード用のスタイルや自分で作成したカスタムカラーモードは、カスタマイズ可能な color-mode() mixin を使って data-bs-theme 属性セレクタやメディアクエリに適切に範囲設定できる。詳細は使用方法の項目に記載。

デフォルトの設定
scss/mixins/_color-mode.scss 内 color-mode-mixin の設定@mixin color-mode($mode: light, $root: false) {
  @if $color-mode-type == "media-query" {
    @if $root == true {
      @media (prefers-color-scheme: $mode) {
        :root {
          @content;
        }
      }
    } @else {
      @media (prefers-color-scheme: $mode) {
        @content;
      }
    }
  } @else {
    [data-bs-theme="#{$mode}"] {
      @content;
    }
  }
}