如何在Bootstrap中正确引入亮/暗模式？ [英] How to properly introduce a light/dark mode in Bootstrap?

问题描述

我使用Bootstrap 4.5，并且在我的HTML模板中使用bg-dark。我要实现亮/暗开关(&Q；)。

因此，Bootstrap有一个bg-lightCSS类，但是我不确定当前的方法是如何使用它。让我澄清一下我的念力：

1. 打开"；开关&q；后，是否应将所有出现的bg-dark替换为bg-light？

2. 如果我想稍微修改bg-light和bg-dark的颜色，主题化(&Q；)是不是正确的方法？我找不到任何覆盖这些变量的示例(通过sass)，除非在我的CSS中手动覆盖它们，如.bg-dark { ... }

非常感谢！

推荐答案

引导5(更新2021年)

虽然在Bootstrap 5中仍然没有明确的亮/暗模式支持，但可以使用Sass创建dark theme

引导4

以下是关于引导亮或暗模式问题的一些答案：

我是否应该用BG-LIGHT替换所有出现的BG-DUCK(&Q) 打开"；开关后？

可以，但您可能还希望切换所有-light和-dark类，如text-dark、navbar-dark、btn-dark等。

如果我想稍微修改BG-light和BG-Dark的颜色..我 找不到任何示例来覆盖这些变量(通过sass)，除了 在我的CSS中手动覆盖它们，如.bg-Dark.

这些变量派生自$light和$darksass变量，因此您可以这样更改它们.

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

@import "bootstrap";

演示Bootstrap Light Dark Mode Switch

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

这篇关于如何在Bootstrap中正确引入亮/暗模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！