自定义组件不响应深色模式，因硬编码颜色覆盖CSS变量；必须用var(--bs-xxx)替代#fff等值，并在:root和[data-bs-theme="dark"]中双重声明变量，且自定义CSS需加载于Bootstrap之后、调用bootstrap.Theme.update()刷新。
自定义CSS没读--bs-xxx变量，颜色是硬编码的
你写的.card-dashboard、.badge-status这些类，如果背景或文字用了background: #fff、color: #333这种写死值，那切换data-bs-theme="dark"时根本不会变——Bootstrap 的变量系统只影响var(--bs-body-bg)这类引用，不干涉你的手写色值。
必须把所有颜色声明替换成变量引用：
-
background-color: var(--bs-body-bg)，不是#fff -
color: var(--bs-body-color)，不是#212529 - 边框、阴影、按钮状态色同理，查 Bootstrap 官方变量名（如
--bs-btn-hover-bg）
:root和[data-bs-theme="dark"]里没双重声明变量
Bootstrap 官方 CSS 中，--bs-primary等变量默认只在[data-bs-theme="dark"]块里被重赋值。如果你的自定义 CSS 只在:root里写了--bs-primary: #0d6efd，那深色模式下它还是浅色值，因为没覆盖逻辑。
正确写法是两处都声明：
立即学习“前端免费学习笔记（深入）”；
:root {
--bs-primary: #0d6efd;
--bs-body-bg: #fff;
}
[data-bs-theme="dark"] {
--bs-primary: #6ea8ff;
--bs-body-bg: #212529;
}
注意：自定义 CSS 必须加载在 Bootstrap 官方 CSS 之后，否则你的变量会被官方默认值覆盖。
自定义样式选择器优先级太高，压过了变量计算结果
即使用了var(--bs-body-bg)，如果选择器太强（比如加了!important，或写成.card-dashboard.card这种高权重组合），最终计算样式仍可能显示硬编码值。
检查浏览器开发者工具的“计算样式”面板：
- 看
background-color最终值是不是一个具体色值（如rgb(255, 255, 255)）→ 说明变量被覆盖了 - 看该属性来源是不是你自己的 CSS 文件 → 检查是否误加了
!important或冗余类名 - 尝试临时删掉自定义 CSS，确认 Bootstrap 原生组件（如
.btn）能否正常反色 → 排除框架本身问题
没调用bootstrap.Theme.getOrCreateInstance().update()
只改document.documentElement.setAttribute('data-bs-theme', 'dark')，CSS 变量值不会自动更新。你在 DevTools 的:root节点里看到--bs-body-bg还是#fff？那就是没执行刷新。
必须确保：
- 已加载
bootstrap/js/dist/theme.js（CDN 用户推荐用 ESM 版：bootstrap.esm.js） - 调用时传的是
document.documentElement，不是document.body或别的节点 - 切换属性后立刻执行：
bootstrap.Theme.getOrCreateInstance(document.documentElement).update()
这一步漏掉，是“看起来点了但没反应”的最常见原因，尤其在 Safari 和旧版 Chrome 中更明显。
