如何在 Bootstrap 中正确引入明暗模式？

Question

我在我的 HTML 模板中使用 Bootstrap 4.5 和 bg-dark。我想实现一个“亮/暗”开关。

所以，Bootstrap 有一个 bg-light css 类，但我不确定当前的方法如何使用它。让我澄清一下我的困惑：

1. 打开“开关”后，我是否应该将所有出现的bg-dark 替换为bg-light？

2. 如果我想稍微修改bg-light 和bg-dark 的颜色，“Theming”是正确的方法吗？我找不到任何示例来覆盖这些变量（通过 SASS），除了在我的 CSS 中手动覆盖它们，比如.bg-dark { ... }

非常感谢！

Answer 1

/* Enable darkmode in a Bootstrap Page */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--bs-dark);
        color: var(--bs-light);
    }
}

Answer 2

引导程序 5（2021 年更新）

虽然在 Bootstrap 5 中仍然没有明确支持明暗模式，但 SASS 可以用来创建 dark theme

引导程序 4

以下是有关 Bootstrap 浅色或深色模式问题的一些答案：

“我应该用 bg-light 替换所有出现的 bg-dark 一旦打开“开关”？”

是的，但您可能还想切换所有 -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 Light Dark Mode Switch

另见：
Customizing Bootstrap CSS template
How to extend/modify (customize) Bootstrap 4 with SASS

Answer 3

Bootstrap 4 和 5 不支持深色模式。也许他们会在 Bootstrap 6 中。

在这种情况下，深色模式是一个令人困惑的名称，因为 Bootstrap 确实支持一种颜色 $dark: $gray-900，并且它确实支持几个深色类，例如 .bg-dark。但这些都不是真正的暗模式，它是操作系统驱动的，传递给浏览器的，网站渲染切换基于：

@media (prefers-color-scheme: dark) {

更糟糕的是，bg-dark 之类的内容意味着您可能会通过交换类名来切换到暗模式，可能是通过 Javascript。执行内置浏览器会占用大量 CPU，这都是因为 Bootstrap 的作者忽略了 Web 的一个重要特性。不要这样做！

All of this is detailed in a much longer way here.

这将为您提供很多选择，但简而言之，对于 Bootstrap 4 和 5，处理正确 prefers-color-scheme: dark 的最佳、最简单、最省力的方法是通过重新分配 Bootstrap 颜色 SASS 来将间接性引入 Bootstrap 颜色您用于为 CSS 变量着色的变量，在您的 _variables.scss 中。 CSS Variables have been supported for years，非常适合深色模式，但在很大程度上被忽视了。例如：

:root {
    --body-bg: #fff;
    --body-color: #000;
}

$white: var(--body-bg);
$black: var(--body-color);
$body-color: var(--body-color);

到目前为止，您所做的只是创建间接 - $white 仍然呈现为 #fff，就像在默认 Bootstrap 中一样。但是现在你可以在操作系统翻转时翻转它：

@media (prefers-color-scheme: dark) {
    --body-bg: #000;
    --body-color: #fff;
}

现在，当操作系统设置为暗模式时，浏览器会看到它并翻转媒体查询，并且您的 CSS 变量也会翻转。由于您已通过 _variables 覆盖将这些变量传播到已编译的 Bootstrap SASS 中，因此您将在呈现的 Bootstrap 中看到结果。

我确实说过最简单和最省力的方法，但您可能已经注意到这仍然需要大量工作。 Bootstrap 4 和 5 完全错过了这一点，所以，跑腿工作在你身上。您需要覆盖您使用的 Bootstrap 中的每种颜色并为它们引入 CSS 变量，然后您需要进行测试以找到未锁定任何变量的颜色，并使用后续全局覆盖这些颜色样式表。

Answer 4

检查这个： https://getbootstrap.com/docs/4.5/getting-started/theming

“使用我们新的内置 Sass 变量自定义 Bootstrap 4 样式偏好，便于主题化和组件更改。”

一旦你想通过 Sass 应用更改，这看起来就是正确的路径

根据他们的文档，用于更改的变量位于“scss/_variables.scss”文件中

这是另一个主题，其中包含一些附加信息如何实现此目的： Customizing Bootstrap CSS template