Bootstrap 5.3.0-alpha(2023年更新)
Bootstrap引入了暗黑模式和其他配色模式的能力。但是,此功能目前仅限于少量变量,并且无法自定义暗黑主题颜色。要切换到暗黑模式,请将data-bs-theme
属性添加到文档的html标签中:
<html data-bs-theme="dark">
使用一点JavaScript,您可以创建一个浅色/深色主题切换:
Bootstrap 5.3暗模式切换
document.getElementById('btnSwitch').addEventListener('click',()=>{
if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
document.documentElement.setAttribute('data-bs-theme','light')
}
else {
document.documentElement.setAttribute('data-bs-theme','dark')
}
})
Bootstrap 5(2021更新)
尽管Bootstrap 5仍没有明确支持浅色/深色模式,但可以使用SASS创建深色主题。
Bootstrap 4(原始答案)
以下是关于 Bootstrap 浅色/深色模式的一些答案:
“当我打开‘开关’时,我是否应该将所有的 bg-dark 替换为 bg-light?”
是的,但您可能还想切换所有的 -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 浅色/深色模式切换
另请参阅:
自定义 Bootstrap CSS 模板
如何使用 SASS 扩展/修改(自定义)Bootstrap
创建新的颜色方案,用于 Bootstrap Sass 的暗-亮模式
v4.5
,很快可能会切换到v5
。 - Daniel Stephens