Bootstrap5 色彩模式（Color modes）

从v5.3.0开始，Bootstrap现在支持颜色模式或主题。探索我们默认的浅色模式和新的暗模式，或者使用我们的样式作为模板创建您自己的样式。

夜间模式/暗黑模式（Dark mode）

Bootstrap 现在支持颜色模式，从暗色模式开始！使用 v5.3.0，您可以实现自己的颜色模式切换器（请参阅下面 Bootstrap 文档中的示例），并根据需要应用不同的颜色模式。我们支持浅色模式（默认）和深色模式。通过 data-bs-theme 属性，可以在 <html> 元素或特定组件和元素上全局切换颜色模式。

另外，你也可以通过我们的色彩模式混合切换到媒体查询实现。不过需要注意的是，这样就无法按组件更改主题了，如下图所示。

示例

例如，要更改下拉菜单的颜色模式，请将 data-bs-theme="light" 或 data-bs-theme="dark" 添加到父级 .dropdown 中。现在，无论全局颜色模式如何，这些下拉列表都将以指定的主题值显示。

<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">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</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">
    Dark dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

在线运行

怎么运行的

如上所示，颜色模式样式由 data-bs-theme 属性控制。此属性可以应用于<html>元素，或任何其他元素或 Bootstrap 组件。如果应用于<html>元素，它将应用于所有内容。如果应用于组件或元素，则其范围将限于该特定组件或元素。
对于你希望支持的每种颜色模式，你需要为共享的全局 CSS 变量添加新的覆盖。我们已经在深色模式的 _root.scss 样式表中执行了此操作，浅色模式是默认值。在编写颜色模式特定样式时，使用 mixin：
```
// _root.scss 中的颜色模式变量
@include color-mode(dark) {
 // CSS 变量在这里覆盖...
}
```
我们使用自定义的_variables-dark.scss来为深色模式的共享全局 CSS 变量覆盖提供支持。你自己的自定义颜色模式不需要此文件，但我们的深色模式需要此文件，原因有两个。首先，最好有一个地方来重置全局颜色。其次，对于嵌入 CSS 中的手风琴、表单组件等的背景图像，必须覆盖一些 Sass 变量。

嵌套颜色模式

在嵌套元素上使用 data-bs-theme 可以更改一组元素或组件的颜色模式。在下面的示例中，我们有一个带有嵌套浅色模式的外部深色模式。你会注意到组件会自然地适应其外观，但你可能需要一路添加一些实用程序才能利用特定于每种颜色模式的样式。

<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="#">Color modes</a></li>
      <li class="breadcrumb-item active" aria-current="page">Dark</li>
    </ol>
  </nav>

  <p>This should be shown in a <strong>dark</strong> theme at all times.</p>

  <div class="progress mb-4">
    <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></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">
      Dark dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
      <li><a class="dropdown-item active" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</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="#">Color modes</a></li>
        <li class="breadcrumb-item"><a href="#">Dark</a></li>
        <li class="breadcrumb-item active" aria-current="page">Light</li>
      </ol>
    </nav>

    <p>This should be shown in a <strong>light</strong> theme at all times.</p>

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

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight2" data-bs-toggle="dropdown" aria-expanded="false">
        Light dropdown
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight2">
        <li><a class="dropdown-item active" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</div>

在线运行

使用 Sass 构建

我们新的深色模式选项可供 Bootstrap 的所有用户使用，但它是通过数据属性而不是媒体查询进行控制的，并且不会自动切换项目的颜色模式。您可以通过 Sass 将 $enable-dark-mode 更改为 false 来完全禁用我们的黑暗模式。

我们使用自定义 Sass mixin color-mode() 来帮助你控制颜色模式的应用方式。默认情况下，我们使用数据属性方法，允许您创建更加用户友好的体验，您的访问者可以选择自动暗模式或控制他们的偏好（就像我们自己的文档中的那样）。这也是一种简单且可扩展的方法，可以添加不同的主题和更多除浅色和深色之外的自定义颜色模式。

如果你想使用媒体查询并且仅使颜色模式自动，您可以通过 Sass 变量更改 mixin 的默认类型。考虑以下代码片段及其编译后的 CSS 输出。

$color-mode-type: data;

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

输出到：

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

当设置为媒体查询(media-query:)时：

$color-mode-type: media-query;

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

输出到：

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

自定义颜色模式

虽然颜色模式的主要用例是浅色和深色模式，但自定义颜色模式也是可能的。使用自定义值作为颜色模式的名称创建您自己的 data-bs-theme 选择器，然后根据需要修改我们的 Sass 和 CSS 变量。我们选择创建一个单独的 _variables-dark.scss 样式表来容纳 Bootstrap 的深色模式特定的 Sass 变量，但这对你来说不是必需的。

例如，你可以使用选择器 data-bs-theme="blue" 创建“蓝色主题”。在自定义 Sass 或 CSS 文件中，添加新选择器并根据需要覆盖任何全局或组件 CSS 变量。如果您使用 Sass，您还可以在 CSS 变量覆盖中使用 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。请随意检查我们自己的文档导航栏，了解它是如何使用我们自己的组件中的 HTML 和 CSS 实现的。请注意，如果您决定对颜色模式使用媒体查询，并且您更喜欢隐式控制，则可能需要修改或删除 JavaScript。

/*!
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2022 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 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')
    })

    btnToActive.classList.add('active')
    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
  }

  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)
        })
      })
  })
})()

https://v5.bootcss.com/docs/customize/color-modes/

Bootstrap5 色彩模式（Color modes）

夜间模式/暗黑模式（Dark mode）

示例

怎么运行的

嵌套颜色模式

使用 Sass 构建

自定义颜色模式

JavaScript

更多

昵称