我在我的HTML模板中使用Bootstrap 4.5和bg-dark
。我想实现一个"亮/暗"开关。
所以,Bootstrap有一个bg-light
css类,但我不确定当前的方法如何使用它.让我澄清一下我的困惑:
1.一旦"开关"打开,我是否应该用bg-light
替换所有出现的bg-dark
?
1.如果我想稍微修改bg-light
和bg-dark
的颜色,"主题化"是正确的方法吗?我找不到任何覆盖这些变量的例子(通过SASS),除了在我的CSS中手动覆盖它们,如.bg-dark { ... }
非常感谢!
4条答案
按热度按时间8yoxcaq71#
尽管Bootstrap 5中仍然没有明确支持亮/暗模式,但SASS可用于创建暗主题
以下是您关于Bootstrap亮模式或暗模式问题的一些答案:
"一旦"开关"打开,我应该用bg-light替换所有出现的bg-dark吗?"
可以,但是您可能还希望切换所有
-light
和-dark
类,例如text-dark
、navbar-dark
、btn-dark
等。如果我想稍微修改bg-light和bg-dark的颜色...我找不到任何例子来覆盖这些变量(通过SASS),除了在我的CSS中手动覆盖它们,比如. bg-dark ...
这些变量派生自
$light
和$dark
SASS变量,因此您可以像这样更改它们...另见:
自定义引导CSS模板
如何使用SASS扩展/修改(定制)Bootstrap
uubf1zoe2#
Bootstrap 4和5不支持黑暗模式。也许在 Bootstrap 6中会支持。
在这种情况下,Dark Mode是一个容易混淆的名称,因为Bootstrap确实支持一种颜色
$dark: $gray-900
,并且它确实支持几个深色类,如.bg-dark
。但这些都不是真正的Dark Mode,它是操作系统驱动的、传递到浏览器的、基于以下内容的网站渲染切换:更糟糕的是,像
bg-dark
这样的东西意味着你可能会通过交换类名来切换到黑暗模式,可能是通过Javascript。这会占用大量的CPU来执行浏览器内置,这一切都是因为Bootstrap的作者忽略了Web的一个重要特性。不要这样做!All of this is detailed in a much longer way here.
这会给你留下很多选择,但简而言之,对于Bootstrap 4和Bootstrap 5来说,处理正确的
prefers-color-scheme: dark
的最好、最简单、最省力的方法是通过重新分配Bootstrap color SASS变量来引入一个间接的Bootstrap颜色。在_variables.scss
中,CSS Variables have been supported for years非常适合Dark Mode,但很大程度上被忽略了。例如:到目前为止,你所做的只是创建了间接- $白色仍然呈现为#fff,就像在默认的Bootstrap中一样,但是现在你可以在操作系统翻转时翻转它:
现在,当操作系统设置为Dark Mode时,浏览器会看到它并翻转媒体查询,CSS变量也会翻转。由于您已经通过_variables重写将这些变量扩展到编译后的Bootstrap SASS中,因此您将在呈现的Bootstrap中看到结果。
我确实说过最简单和最省力,但是你可能已经注意到这仍然是一个很大的工作。Bootstrap 4和5完全错过了这条船,所以,跑腿的工作就在你身上了。你需要覆盖Bootstrap中你使用的每一种颜色,并为它们引入CSS变量,然后你需要测试找到没有被任何变量键控掉的颜色。然后用后续的全局样式表覆盖它们。
mklgxw1f3#
请检查:https://getbootstrap.com/docs/4.5/getting-started/theming
"使用我们新的内置Sass变量自定义Bootstrap 4,以获得全局样式首选项,从而轻松进行主题化和组件更改。"
一旦你想应用Sass所做的更改,这看起来是正确的路径
根据他们的文档,用于更改的变量位于"scss/_ variables. scss"文件中
下面是另一个主题,其中包含如何实现此目的的一些附加信息:自定义引导CSS模板
o2g1uqev4#