如何在Bootstrap中正确引入亮/暗模式?

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

本文介绍了如何在Bootstrap中正确引入亮/暗模式?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用Bootstrap 4.5,并且在我的HTML模板中使用bg-dark。我要实现亮/暗开关(&Q;)。 因此,Bootstrap有一个bg-lightCSS类,但是我不确定当前的方法是如何使用它。让我澄清一下我的念力:

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

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

非常感谢!

推荐答案

引导5(更新2021年)

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

引导4

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

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

可以,但您可能还希望切换所有-light-dark类,如text-darknavbar-darkbtn-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中正确引入亮/暗模式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何在Bootstrap中正确引入亮/暗模式?

基础教程推荐