我使用 Bootstrap 4.5 并在我的 HTML 模板中使用了 bg-dark。我想实现一个“浅色/深色”切换。
因此，Bootstrap 有一个 bg-light 的 CSS 类，但我不确定如何使用它。让我澄清一下我的困惑：
当“切换”打开时，我是否应该将所有的 bg-dark 实例替换为 bg-light？
如果我想稍微修改 bg-light 和 bg-dark 的颜色，那么“主题化”是正确的方法吗？除了手动在 CSS 中重写这些变量（例如 .bg-dark { ... }），我找不到覆盖它们的变量的示例（通过 SASS）。
非常感谢！
Bootstrap 5.3.0-alpha（2023年更新）
Bootstrap引入了暗黑模式和其他配色模式的能力。但是，此功能目前仅限于少量变量，并且无法自定义暗黑主题颜色。要切换到暗黑模式，请将data-bs-theme属性添加到文档的html标签中：
<html data-bs-theme="dark">
使用一点JavaScript，您可以创建一个浅色/深色主题切换：
document.getElementById('btnSwitch').addEventListener('click',()=>{
if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
document.documentElement.setAttribute('data-bs-theme','light')
}
else {
document.documentElement.setAttribute('data-bs-theme','dark')
}
})
Bootstrap 5（2021更新）
尽管Bootstrap 5仍没有明确支持浅色/深色模式，但可以使用SASS创建深色主题。
Bootstrap 4（原始答案）
以下是关于 Bootstrap 浅色/深色模式的一些答案：
“当我打开‘开关’时，我是否应该将所有的 bg-dark 替换为 bg-light？”
是的，但您可能还想切换所有的 -light 和 -dark 类，例如 text-dark、navbar-dark、btn-dark 等。
如果我想轻微修改 bg-light 和 bg-dark 的颜色... 我找不到任何覆盖这些变量的示例（通过 SASS），除非手动在我的 CSS 中覆盖它们，如 .bg-dark...
这些变量源自 $light 和 $dark SASS 变量，因此您可以像这样更改它们...
$light: #dddddd;
$dark: #011100;
@import "bootstrap";
另请参阅：
自定义 Bootstrap CSS 模板
如何使用 SASS 扩展/修改（自定义）Bootstrap
创建新的颜色方案，用于 Bootstrap Sass 的暗-亮模式
bg-body、bg-body-secondary 和 bg-body-tertiary。 - wscourgeBootstrap 4和5不支持暗黑模式。也许在Bootstrap 6中会支持。
在这种情况下，“Dark Mode”是一个令人困惑的名称，因为Bootstrap确实支持一种颜色$dark:$gray-900，并且它确实支持几个暗色类，如.bg-dark。但是，这些都不是真正的暗黑模式，暗黑模式是由操作系统驱动、传递给浏览器的，基于网站渲染切换的功能:
@media (prefers-color-scheme: dark) {
更糟糕的是，像bg-dark这样的东西意味着您需要通过交换类名来切换到暗模式，可能需要使用Javascript。由于Bootstrap作者忽略了Web的一个重要功能，这会导致大量的CPU使用，以执行浏览器内置操作。不要这样做！
这将为您留下很多选项，但简而言之，在Bootstrap 4和5中处理正确的prefers-color-scheme: dark的最佳、最简单、最省力的方法是通过在_variables.scss中重新分配您正在使用的Bootstrap颜色SASS变量到颜色CSS变量的间接方式来实现。 多年来一直支持CSS变量，非常适合暗模式，并且通常被忽视。例如：
:root {
--body-bg: #fff;
--body-color: #000;
}
$white: var(--body-bg);
$black: var(--body-color);
$body-color: var(--body-color);
到目前为止，你所做的只是创建间接性 - $white 仍然像默认的 Bootstrap 一样呈现为 #fff。但现在当操作系统翻转时，你可以将其翻转：
@media (prefers-color-scheme: dark) {
--body-bg: #000;
--body-color: #fff;
}
当操作系统设置为深色模式时，浏览器会检测到并切换对应的媒体查询和你的CSS变量。由于你已经通过覆盖_variables中的编译Bootstrap SASS将这些变量传播开来，所以你会在呈现的Bootstrap中看到结果。
我说过简单最省力，但你可能已经注意到这仍然需要很多工作。Bootstrap 4和5在这方面都完全错过了，所以这项工作要靠你自己完成。你需要覆盖你使用的Bootstrap中的每一个颜色并引入CSS变量，然后测试找出那些没有依赖于任何变量的颜色，并用后续的全局样式表覆盖它们。
Bootstrap 5.3.0
自 Bootstrap v5.3.0 开始，Bootstrap 支持颜色模式（或主题）。探索我们的默认亮色模式和新的暗色模式，或者使用我们的样式作为模板创建自己的主题。
从 v5.3 开始（目前处于 alpha 版本），支持颜色模式！现在您可以添加 data-bs-theme 属性来更改元素的主题（亮/暗）。将其应用于 HTML 元素将导致整个页面匹配该风格。您可以在 文档页面 上了解更多信息。
但是，如果您想根据用户的首选项（即 prefers-color-scheme）更改主题，则需要使用 JavaScript 切换主题属性。
这是一个可工作的示例：
// Set theme to the user's preferred color scheme
function updateTheme() {
const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ?
"dark" :
"light";
document.querySelector("html").setAttribute("data-bs-theme", colorMode);
}
// Set theme on load
updateTheme()
// Update theme when the preferred scheme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="p-3">
<h1>Dark Mode for Bootstrap</h1>
<p>from Bootstrap v5.3.0, dark color modes are supported.</p>
</div>
</body>
</html>/* Enable darkmode in a Bootstrap Page */
@media (prefers-color-scheme: dark) {
body {
background-color: var(--bs-dark);
color: var(--bs-light);
}
}
Bootstrap现在支持颜色模式，从暗模式开始。 在5.3.0版本中，您可以实现自己的颜色模式切换器，并根据需要应用不同的颜色模式。它们支持浅色模式（默认）和现在的暗模式预设主题。由于data-bs-theme属性的存在，颜色模式可以在元素上全局切换，也可以在特定组件和元素上切换。 https://getbootstrap.com/docs/5.3/customize/color-modes/
data-bs-theme="light"
data-bs-theme="dark"
data-bs-theme="auto"
请查看以下内容： https://getbootstrap.com/docs/4.5/getting-started/theming
"使用我们内置的新Sass变量自定义Bootstrap 4，以实现全局样式偏好和组件更改的易于主题化。"
如果您想通过Sass应用更改，则这似乎是正确的路径
根据他们的文档，更改这个变量在“scss/_variables.scss”文件中
这里有另一个主题，其中包含一些额外信息，说明如何实现此目标： Customizing Bootstrap CSS template
v4.5，很快可能会切换到v5。 - Daniel Stephens