Skip to main content Skip to docs navigation
Added in v5.3

色彩模式

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

目录
Try it yourself! Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the twbs/examples repository. You can also open the example in StackBlitz.

夜间模式

¥Dark mode

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

¥Bootstrap now supports color modes, starting with dark mode! With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap’s docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the <html> element, or on specific components and elements, thanks to the data-bs-theme attribute.

或者，你也可以通过我们的颜色模式 mixin 切换到媒体查询实现 - 请参阅 使用部分了解详细信息。但请注意，这消除了你在每个组件的基础上更改主题的能力，如下所示。

¥Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see the usage section for details. Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.

示例

¥Example

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

¥For example, to change the color mode of a dropdown menu, add data-bs-theme="light" or data-bs-theme="dark" to the parent .dropdown. Now, no matter the global color mode, these dropdowns will display with the specified theme value.

html 
<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>

怎么运行的

¥How it works

  • 如上所示，颜色模式样式由 data-bs-theme 属性控制。此属性可以应用于 <html> 元素，或任何其他元素或 Bootstrap 组件。如果应用于 <html> 元素，它将应用于所有内容。如果应用于组件或元素，则其范围将限于该特定组件或元素。

    ¥As shown above, color mode styles are controlled by the data-bs-theme attribute. This attribute can be applied to the <html> element, or to any other element or Bootstrap component. If applied to the <html> element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element.

  • 对于你希望支持的每种颜色模式，你需要为共享的全局 CSS 变量添加新的覆盖。我们已经在夜间模式的 _root.scss 样式表中执行了此操作，浅色模式是默认值。在编写颜色模式特定样式时，使用 mixin：

    ¥For each color mode you wish to support, you’ll need to add new overrides for the shared global CSS variables. We do this already in our _root.scss stylesheet for dark mode, with light mode being the default values. In writing color mode specific styles, use the mixin:

    // Color mode variables in _root.scss
@include color-mode(dark) {
  // CSS variable overrides here...
}

  • 我们使用自定义 _variables-dark.scss 来为夜间模式的共享全局 CSS 变量覆盖提供支持。你自己的自定义颜色模式不需要此文件，但我们的夜间模式需要此文件，原因有两个。首先，最好有一个地方来重置全局颜色。其次，对于嵌入 CSS 中的手风琴、表单组件等的背景图片，必须覆盖一些 Sass 变量。

    ¥We use a custom _variables-dark.scss to power those shared global CSS variable overrides for dark mode. This file isn’t required for your own custom color modes, but it’s required for our dark mode for two reasons. First, it’s better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.

用法

¥Usage

启用夜间模式

¥Enable dark mode

通过将 data-bs-theme="dark" 属性添加到 <html> 元素，在整个项目中启用内置夜间模式。这会将夜间模式应用于所有组件和元素，应用了特定 data-bs-theme 属性的组件和元素除外。基于快速入门模板：

¥Enable the built in dark color mode across your entire project by adding the data-bs-theme="dark" attribute to the <html> element. This will apply the dark color mode to all components and elements, other than those with a specific data-bs-theme attribute applied. Building on the quick start template:

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap 尚未附带内置颜色模式选择器，但如果你愿意，可以使用我们自己的文档中的颜色模式选择器。在 JavaScript 部分了解更多信息。

¥Bootstrap does not yet ship with a built-in color mode picker, but you can use the one from our own documentation if you like. Learn more in the JavaScript section.

使用 Sass 构建

¥Building with Sass

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

¥Our new dark mode option is available to use for all users of Bootstrap, but it’s controlled via data attributes instead of media queries and does not automatically toggle your project’s color mode. You can disable our dark mode entirely via Sass by changing $enable-dark-mode to false.

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

¥We use a custom Sass mixin, color-mode(), to help you control how color modes are applied. By default, we use a data attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.

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

¥In case you want to use media queries and only make color modes automatic, you can change the mixin’s default type via Sass variable. Consider the following snippet and its compiled CSS output.

$color-mode-type: data;

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

输出到：

¥Outputs to:

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

当设置为 media-query 时：

¥And when setting to media-query:

$color-mode-type: media-query;

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

输出到：

¥Outputs to:

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

自定义颜色模式

¥Custom color modes

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

¥While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own data-bs-theme selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate _variables-dark.scss stylesheet to house Bootstrap’s dark mode specific Sass variables, but that’s not required for you.

例如，你可以使用选择器 data-bs-theme="blue" 创建 “蓝色主题”。在自定义 Sass 或 CSS 文件中，添加新选择器并根据需要覆盖任何全局或组件 CSS 变量。如果你使用 Sass，你还可以在 CSS 变量覆盖中使用 Sass 的函数。

¥For example, you can create a “blue theme” with the selector data-bs-theme="blue". In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you’re using Sass, you can also use Sass’s functions within your CSS variable overrides.

site/assets/scss/_content.scss 
[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);
  }
}
Example blue theme

Some paragraph text to show how the blue theme might look with written copy.

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

JavaScript

为了允许访问者或用户切换颜色模式，你需要创建一个切换元素来控制根元素 <html> 上的 data-bs-theme 属性。我们在文档中构建了一个切换器，最初遵循用户当前的系统颜色模式，但提供了一个选项来覆盖它并选择特定的颜色模式。

¥To allow visitors or users to toggle color modes, you’ll need to create a toggle element to control the data-bs-theme attribute on the root element, <html>. We’ve built a toggler in our documentation that initially defers to a user’s current system color mode, but provides an option to override that and pick a specific color mode.

下面来看看为其提供支持的 JavaScript。请随意检查我们自己的文档导航栏，了解它是如何使用我们自己的组件中的 HTML 和 CSS 实现的。建议在页面顶部包含 JavaScript，以减少网站重新加载期间潜在的屏幕闪烁。请注意，如果你决定对颜色模式使用媒体查询，并且你更喜欢隐式控制，则可能需要修改或删除 JavaScript。

¥Here’s a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it’s implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.

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

(() => {
  'use strict'

  const getStoredTheme = () => localStorage.getItem('theme')
  const setStoredTheme = theme => localStorage.setItem('theme', theme)

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

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

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

  setTheme(getPreferredTheme())

  const showActiveTheme = (theme, focus = false) => {
    const themeSwitcher = document.querySelector('#bd-theme')

    if (!themeSwitcher) {
      return
    }

    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)

    if (focus) {
      themeSwitcher.focus()
    }
  }

  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    const storedTheme = getStoredTheme()
    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')
          setStoredTheme(theme)
          setTheme(theme)
          showActiveTheme(theme, true)
        })
      })
  })
})()

添加主题颜色

¥Adding theme colors

对于我们的某些组件，例如 警报 和 列表组，在 $theme-colors 中添加新颜色是不够的。对于浅色主题，还必须在 $theme-colors-text、$theme-colors-bg-subtle 和 $theme-colors-border-subtle 中定义新颜色；而且在 $theme-colors-text-dark、$theme-colors-bg-subtle-dark 和 $theme-colors-border-subtle-dark 中也有深色主题。

¥Adding a new color in $theme-colors is not enough for some of our components like alerts and list groups. New colors must also be defined in $theme-colors-text, $theme-colors-bg-subtle, and $theme-colors-border-subtle for light theme; but also in $theme-colors-text-dark, $theme-colors-bg-subtle-dark, and $theme-colors-border-subtle-dark for dark theme.

这是一个手动过程，因为 Sass 无法从现有变量或映射生成自己的 Sass 变量。在 Bootstrap 的未来版本中，我们将重新审视此设置以减少重复。

¥This is a manual process because Sass cannot generate its own Sass variables from an existing variable or map. In future versions of Bootstrap, we’ll revisit this setup to reduce the duplication.

// Required
@import "functions";
@import "variables";
@import "variables-dark";

// Add a custom color to $theme-colors
$custom-colors: (
  "custom-color": #712cf9
);
$theme-colors: map-merge($theme-colors, $custom-colors);

@import "maps";
@import "mixins";
@import "utilities";

// Add a custom color to new theme maps

// Light mode
$custom-colors-text: ("custom-color": #712cf9);
$custom-colors-bg-subtle: ("custom-color": #e1d2fe);
$custom-colors-border-subtle: ("custom-color": #bfa1fc);

$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text);
$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle);
$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);

// Dark mode
$custom-colors-text-dark: ("custom-color": #e1d2f2);
$custom-colors-bg-subtle-dark: ("custom-color": #8951fa);
$custom-colors-border-subtle-dark: ("custom-color": #e1d2f2);

$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark);
$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark);
$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark);

// Remainder of Bootstrap imports
@import "root";
@import "reboot";
// etc

CSS

变量

¥Variables

数十个根级 CSS 变量被重复作为夜间模式的覆盖。这些范围仅限于颜色模式选择器，默认为 data-bs-theme，但 可以配置 使用 prefers-color-scheme 媒体查询。使用这些变量作为生成你自己的新颜色模式的指南。

¥Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to data-bs-theme but can be configured to use a prefers-color-scheme media query. Use these variables as a guideline for generating your own new color modes.

scss/_root.scss 
--#{$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)};

@each $color, $value in $theme-colors-text-dark {
  --#{$prefix}#{$color}-text-emphasis: #{$value};
}

@each $color, $value in $theme-colors-bg-subtle-dark {
  --#{$prefix}#{$color}-bg-subtle: #{$value};
}

@each $color, $value in $theme-colors-border-subtle-dark {
  --#{$prefix}#{$color}-border-subtle: #{$value};
}

--#{$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}highlight-color: #{$mark-color-dark};
--#{$prefix}highlight-bg: #{$mark-bg-dark};

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

--#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};

Sass 变量

¥Sass variables

我们的夜间模式的 CSS 变量部分是从 _variables-dark.scss 中夜间模式特定的 Sass 变量生成的。这还包括一些自定义覆盖，用于更改整个组件中使用的嵌入 SVG 的颜色。

¥CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in _variables-dark.scss. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.

scss/_variables-dark.scss 
$primary-text-emphasis-dark:        tint-color($primary, 40%);
$secondary-text-emphasis-dark:      tint-color($secondary, 40%);
$success-text-emphasis-dark:        tint-color($success, 40%);
$info-text-emphasis-dark:           tint-color($info, 40%);
$warning-text-emphasis-dark:        tint-color($warning, 40%);
$danger-text-emphasis-dark:         tint-color($danger, 40%);
$light-text-emphasis-dark:          $gray-100;
$dark-text-emphasis-dark:           $gray-300;

$primary-bg-subtle-dark:            shade-color($primary, 80%);
$secondary-bg-subtle-dark:          shade-color($secondary, 80%);
$success-bg-subtle-dark:            shade-color($success, 80%);
$info-bg-subtle-dark:               shade-color($info, 80%);
$warning-bg-subtle-dark:            shade-color($warning, 80%);
$danger-bg-subtle-dark:             shade-color($danger, 80%);
$light-bg-subtle-dark:              $gray-800;
$dark-bg-subtle-dark:               mix($gray-800, $black);

$primary-border-subtle-dark:        shade-color($primary, 40%);
$secondary-border-subtle-dark:      shade-color($secondary, 40%);
$success-border-subtle-dark:        shade-color($success, 40%);
$info-border-subtle-dark:           shade-color($info, 40%);
$warning-border-subtle-dark:        shade-color($warning, 40%);
$danger-border-subtle-dark:         shade-color($danger, 40%);
$light-border-subtle-dark:          $gray-700;
$dark-border-subtle-dark:           $gray-800;

$body-color-dark:                   $gray-300;
$body-bg-dark:                      $gray-900;
$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%);
$body-emphasis-color-dark:          $white;
$border-color-dark:                 $gray-700;
$border-color-translucent-dark:     rgba($white, .15);
$headings-color-dark:               inherit;
$link-color-dark:                   tint-color($primary, 40%);
$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage);
$code-color-dark:                   tint-color($code-color, 40%);
$mark-color-dark:                   $body-color-dark;
$mark-bg-dark:                      $yellow-800;


//
// 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>");

$form-valid-color-dark:             $green-300;
$form-valid-border-color-dark:      $green-300;
$form-invalid-color-dark:           $red-300;
$form-invalid-border-color-dark:    $red-300;


//
// Accordion
//

$accordion-icon-color-dark:         $primary-text-emphasis-dark;
$accordion-icon-active-color-dark:  $primary-text-emphasis-dark;

$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-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-.708'/></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='#{$accordion-icon-active-color-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-.708'/></svg>");

Sass 混入

¥Sass mixins

夜间模式的样式以及你创建的任何自定义颜色模式都可以通过可自定义的 color-mode() mixin 将范围适当地限定为 data-bs-theme 属性选择器或媒体查询。有关详细信息，请参阅 Sass 使用部分。

¥Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the data-bs-theme attribute selector or media query with the customizable color-mode() mixin. See the Sass usage section for more details.

scss/mixins/_color-mode.scss 
@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;
    }
  }
}