英文:
How to invert background color based on the light/dark theme in Bootstrap 5.3?
问题
在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>
在Bootstrap 5.3中如何根据浅色/深色主题反转背景颜色？
英文:
In Bootstrap 5.3, we are able to specify a theme to use for the site. Out of the box there are two supported theme Dark and Light.
If I set my <html data-bs-theme="dark">, I want to set the site navbar to a light color. At the same time, when setting <html data-bs-theme="light"> I want the navbar to have dark background colors.
If there a specific class in Bootstrap that can be used to invert the colors based on the current theme?
I tried using the body-* classes to accomplish, but that does not do what I want. I want to select the opposite of the current text-body or bg-body.
<nav class="navbar text-body bg-body">
</nav>
How to invert background color based on the light/dark theme in Bootstrap 5.3?
答案1
得分: 1
你可以通过使用 CSS 变量来实现这一点。
首先，在 :root 中定义主题颜色：
: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;
}
以及使用 "dark" 主题时 .bg-body 的颜色：
[data-bs-theme=dark] {
--bg-body: --bg-body-dark;
--text-body: --text-body-dark;
}
现在，在不同主题之间切换时，nav 的背景和文字颜色应相应更新。
Bootstrap 5.3 定义了自己的主题颜色变量，你可以随意使用它们，而不是我上面声明的那些。
希望对你有帮助。
英文:
You can achieve this using css variables.
First you define your main theme colours in :root
:root {
--bg-body-dark: #202124;
--bg-body-light: #fff;
--text-body-light: #191919;
--text-body-dark: #f8f9fa;
}
Then you assign a colour to use for the .bg-body class with the "light" theme:
[data-bs-theme=light] {
--bg-body: --bg-body-light;
--text-body: --text-body-light;
}
And which colour to use for .bg-body with the "dark" theme:
[data-bs-theme=dark] {
--bg-body: --bg-body-dark;
--text-body: --text-body-dark;
}
Now when you toggle between themes, the nav background and text colour should update accordingly.
Bootstrap 5.3 defines it's own theme colour variables:
Feel free to use these instead of the ones I declared above.
I hope this helps.
答案2
得分: 1
J 先生的方法将全局反转 .bg-body 和 .text-body。我不确定这有多有用，因为在这种情况下，你可以（应该）只是使用相反的主题。
嵌套颜色模式（JS）
我会使用 salif 的建议，Bootstrap 称之为 嵌套颜色模式：
<body data-bs-theme="dark">
<nav id="nav" data-bs-theme="light" class="navbar text-body bg-body">
然后在你的 JS 颜色模式切换器中，翻转两个 data-bs-theme 属性：
window.onload = function() {
document.getElementById('themer').addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-bs-theme')
const inverted = current == 'dark' ? 'light' : 'dark'
document.documentElement.setAttribute('data-bs-theme', inverted)
document.getElementById('nav').setAttribute('data-bs-theme', current)
})
}
反转类（仅 CSS）
如果你只想使用 CSS 完成，定义 -inverted 类来交换前景和背景：
.bg-body-inverted（反转主题背景）映射到--bs-body-color（主题前景）.text-body-inverted（反转主题前景）映射到--bs-body-bg（主题背景）
这些 -inverted 版本将在不考虑颜色模式的情况下反转前景/背景：
.bg-body-inverted {
background-color: var(--bs-body-color) !important;
}
.text-body-inverted {
color: var(--bs-body-bg) !important;
}
英文:
Mr. J's approach will invert .bg-body and .text-body globally. I'm not sure how useful that is because you could (should) just use the opposite theme in that case.
Nested color modes (JS)
I would use salif's suggestion, which Bootstrap calls nested color modes:
<body data-bs-theme="dark">
<nav id="nav" data-bs-theme="light" class="navbar text-body bg-body">
Then in your JS color mode toggler, flip both data-bs-theme attributes:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
window.onload = function() {
document.getElementById('themer').addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-bs-theme')
const inverted = current == 'dark' ? 'light' : 'dark'
document.documentElement.setAttribute('data-bs-theme', inverted)
document.getElementById('nav').setAttribute('data-bs-theme', current)
})
}
<!-- language: lang-html -->
<html data-bs-theme="dark">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav data-bs-theme="light" id="nav" class="navbar text-body bg-body">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Inverted navbar</span>
<a id="themer" href="#" class="btn btn-primary m-3" role="button" data-bs-toggle="button">Toggle theme</a>
</div>
</nav>
</body>
</html>
<!-- end snippet -->
Inverted classes (CSS only)
If you want to do it with just CSS, define -inverted classes to swap foreground and background:
.bg-body-inverted(inverted theme background) gets mapped to--bs-body-color(theme foreground).text-body-inverted(inverted theme foreground) gets mapped to--bs-body-bg(theme background)
These -inverted versions will invert fg/bg regardless of color mode:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bg-body-inverted {
background-color: var(--bs-body-color) !important;
}
.text-body-inverted {
color: var(--bs-body-bg) !important;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<body data-bs-theme="dark">
<nav class="navbar text-body-inverted bg-body-inverted">
<div class="container-fluid">
<span class="navbar-brand text-body-inverted mb-0 h1">Inverted navbar</span>
</div>
</nav>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论