Bootstrap 5.3+ 主题切换需手动管理状态：在 添加 dark 类并同步 localStorage，优先级为 localStorage → prefers-color-scheme → 默认 light，不可仅依赖 data-bs-theme 或媒体查询。
如何用 Bootstrap 5.3+ 的 data-bs-theme 实现主题切换
Bootstrap 5.3 起原生支持 data-bs-theme="dark" 属性，但仅靠它无法“一键切换”——它只是静态标记，不触发 CSS 变量重载或 localStorage 持久化。真正可用的方案必须手动补全状态管理与 class 注入逻辑。
常见错误是直接写 就以为黑夜模式生效了，结果发现组件颜色没变、表单控件还是亮色、甚至 prefers-color-scheme 冲突导致闪烁。
- 必须在
或上添加class="dark"（或自定义类名），并配合 Bootstrap 的 CSS 变量覆盖规则 -
data-bs-theme仅用于服务端渲染提示或辅助 JS 判断，不能替代 class 控制样式 - 务必监听
localStorage初始化，否则刷新后退回到默认主题
为什么不能只靠 prefers-color-scheme 媒体查询
系统级暗色偏好（@media (prefers-color-scheme: dark)）会自动启用 Bootstrap 的暗色变量，但它完全绕过用户主动选择——用户点了“黑夜模式”按钮，结果被系统设置覆盖，或者反之。
更麻烦的是：Chrome 和 Safari 对该媒体查询的触发时机不一致，某些情况下页面加载时查不到偏好，导致首次渲染错乱。
- 必须把用户选择（
localStorage）作为最高优先级，媒体查询仅作 fallback - 初始化时按顺序检查：
localStorage→prefers-color-scheme→ 默认（light） - 不要在 CSS 中直接写
@media (prefers-color-scheme: dark) { :root { ... } }，Bootstrap 已内置，重复覆盖易出错
切换按钮的 JS 实现要点
核心是切换 document.documentElement 的 class，并同步写入 localStorage。Bootstrap 不提供 toggle 方法，得自己写。
function toggleTheme() {
const html = document.documentElement;
const isDark = html.classList.contains('dark');
if (isDark) {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
}
注意：必须操作 html 元素而非 body，因为 Bootstrap 的暗色变量作用域基于 :root（即 html）；另外，localStorage.setItem 必须在 class 切换后立即执行，否则页面跳转或刷新时读不到最新值。
- 绑定事件推荐用
addEventListener('click', toggleTheme)，别用onclick=""内联写法 - 按钮
aria-pressed状态要同步更新，方便屏幕阅读器识别当前模式 - 避免在
DOMContentLoaded外执行，否则可能找不到元素
Bootstrap 5.3 暗色模式的 CSS 变量依赖项
Bootstrap 的暗色模式不是靠一堆独立 class 实现的，而是通过一组预设 CSS 变量（如 --bs-body-bg、--bs-emphasis-color）动态计算。这些变量只在 .dark 类存在时才被重定义。
如果你用的是 CDN 引入的 Bootstrap CSS（非 Sass 编译），那无需改动 CSS 文件——但必须确保引入的是完整版（含 dark mode 支持），而不是精简版或旧版本（5.2 及以下无此能力）。
- 检查你用的 CSS 链接是否包含
bootstrap.min.css且版本 ≥ 5.3.0 - 不要试图手动覆盖
--bs-body-bg等变量，除非你清楚所有衍生变量（如--bs-body-bg-rgb）也需同步更新 - 第三方组件（如 Flatpickr、Toast UI）不会自动适配，需单独加 dark class 或监听 class 变化做重绘
