必须在:root和[data-bs-theme="dark"]中成对重定义--bs-*变量，如:root{--bs-body-bg:#fff;}[data-bs-theme="dark"]{--bs-body-bg:#121212;}，且自定义CSS须在Bootstrap后加载、禁用硬编码颜色。
如何覆盖 Bootstrap 5.3+ 的暗色变量值
Bootstrap 5.3+ 的暗黑模式配色不是靠替换整套 CSS，而是通过重定义 CSS 自定义变量（如 --bs-body-bg、--bs-primary）实现。这些变量必须在 :root 和 [data-bs-theme="dark"] 两个作用域里**同时声明**，否则切换后不生效。
常见错误是只写一条：
:root {
--bs-body-bg: #121212;
}
这会导致浅色模式也变黑——因为 :root 是全局作用域。正确写法是：
:root {
--bs-body-bg: #ffffff;
}
[data-bs-theme="dark"] {
--bs-body-bg: #121212;
--bs-body-color: #e0e0e0;
--bs-primary: #bb8fcd;
}
- 所有自定义颜色都得在这两处成对出现，不能只改一处
- 变量名必须和 Bootstrap 官方一致（比如
--bs-card-bg，不是--card-bg） - 如果你用 SCSS，应修改
_variables-dark.scss并重新编译，而非直接覆盖 CSS
为什么改了变量页面还是没变色
最常被忽略的原因是：你写的 CSS 被 Bootstrap 原生规则覆盖了，或者变量压根没注入到 :root。
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具的
:root元素，展开看--bs-body-bg的计算值是否随data-bs-theme切换而变化；不变说明你的 CSS 没加载或选择器权重不够 - 确认你的自定义 CSS 文件在
bootstrap.min.css之后引入，否则会被覆盖 - 避免硬编码颜色：写
background: #121212会绕过变量机制，必须用background: var(--bs-body-bg) - 如果用了 CDN，确保链接的是完整版 CSS（例如
bootstrap.css或明确带 dark mode 的构建），精简版（如某些 -min.css）可能剔除了[data-bs-theme="dark"]规则块
局部组件使用自定义暗色配色
Bootstrap 允许在任意容器上加 data-bs-theme="dark" 实现局部暗色，但自定义变量不会自动继承——它只读取 :root 和顶层 [data-bs-theme="dark"] 定义的值。
- 若想让某个卡片用专属紫灰背景，不能只给卡片加属性，还得额外写作用域更精确的 CSS：
.my-special-card[data-bs-theme="dark"] {
--bs-card-bg: #1a1a2e;
}
- 注意：这种写法依赖该卡片父元素或自身有
data-bs-theme="dark"，且不能破坏 Bootstrap 变量链 - 更稳妥的方式是用 class 控制，比如
class="card card-dark-purple"，再单独写.card-dark-purple { background: var(--bs-card-bg); }配合变量覆盖
切换主题时图标与变量不同步怎么办
按钮图标（如 Font Awesome 的 fa-sun/fa-moon）状态脱节，本质是 JS 没读取真实 data-bs-theme 值，而是靠内部布尔变量维护状态。
- 每次切换前，先读取：
const current = document.documentElement.getAttribute('data-bs-theme') - 图标逻辑必须基于这个值判断，而不是“上次点了就记为 dark”
- 系统偏好变更时（
matchMedia('(prefers-color-scheme)')触发），也要同步调用document.documentElement.setAttribute('data-bs-theme', ...)并更新图标，否则用户在系统设置里切了夜间模式，页面图标还是旧的 - 别用
classList.toggle简单翻转两个 icon 类——它无法处理三方介入（如浏览器插件、系统级主题强制）
style="background: white" 或第三方组件内联样式时，data-bs-theme 会完全失能。 
