如何在Bootstrap 5.3中根据亮/暗主题交替背景颜色？

ruarlubt 于 2023-03-21 发布在 Bootstrap

关注(0)|答案(1)|浏览(200)

在Bootstrap 5.3中，我们可以为站点指定一个主题。开箱即用的主题有两个：Dark和Light。
如果我设置了<html data-bs-theme="dark">，我想把网站导航栏设置成浅色，同时，当设置<html data-bs-theme="light">时，我想把导航栏的背景色设置成深色。
Bootstrap中是否有一个特定的类可以用来根据当前主题替换颜色？
我试着使用body-*类来完成，但那并没有达到我想要的效果。我想选择与当前text-body或bg-body相反的类。

<nav class="navbar text-body bg-body">
       
</nav>

twitter-bootstrap

来源：https://stackoverflow.com/questions/75794282/how-to-alternate-background-color-based-on-the-light-dark-theme-in-bootstrap-5-3

1条答案

按热度按时间

esyap4oy1#

可以使用css变量来实现这一点。
首先你定义你的主题颜色在：根

:root {
  --bg-body-dark: #202124;
  --bg-body-light: #fff;
  --text-body-light: #191919;
  --text-body-dark: #f8f9fa;
}

然后为.bg-body类指定一种颜色，主题为“light”：

[data-bs-theme=light] {
  --bg-body: --bg-body-light;
  --text-body: --text-body-light;
}

.bg-body的“dark”主题使用哪种颜色：

[data-bs-theme=dark] {
  --bg-body: --bg-body-dark;
  --text-body: --text-body-dark;
}

现在当你切换主题时，nav的背景和文本颜色应该会相应地更新。
Bootstrap 5.3定义了自己的主题颜色变量：

请随意使用这些来代替我上面声明的那些。
希望这能帮上忙。

赞(0）回复(0）举报 2023-03-21

我来回答

如何在Bootstrap 5.3中根据亮/暗主题交替背景颜色？

1条答案

相关问题

热门标签

最新问答