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

Question

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

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

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

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

非常感谢！

原文由 Daniel Stephens 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

引导程序 5（2021 年更新）

虽然在 Bootstrap 5 中仍然没有明确支持亮/暗模式，但可以使用 SASS 来创建 暗色主题

引导程序 4

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

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

Yes, but you’d probably also want to switch all -light and -dark classes such as text-dark , navbar-dark , btn-dark 等等。

如果我想稍微修改 bg-light 和 bg-dark 的颜色。我找不到任何示例来覆盖这些变量（通过 SASS），除了在我的 CSS 中手动覆盖它们，比如 .bg-dark ……

这些来自 $light 和 $dark SASS 变量，因此您可以像这样更改它们…

 $light: #dddddd;
$dark: #011100;

@import "bootstrap";

演示 Bootstrap 亮暗模式开关

另见：

自定义 Bootstrap CSS 模板

如何使用 SASS 扩展/修改（自定义）Bootstrap 4

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

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

所有这些都在这里以更长的方式详细说明。

这会给你留下很多选择，但简而言之，对于 Bootstrap 4 和 5，处理正确 prefers-color-scheme: dark 的最佳、最简单、最省力的方法是通过重新分配 Bootstrap 颜色来间接引入 Bootstrap 颜色您用于为 CSS 变量着色的 SASS 变量，在您的 _variables.scss 中。 CSS 变量已得到支持多年，非常适合深色模式，但在很大程度上被忽视了。例如：

 :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 变量，然后您需要测试以找到未锁定任何变量的颜色，并使用后续全局覆盖这些颜色样式表。

原文由 Chris Moschini 发布，翻译遵循 CC BY-SA 4.0 许可协议