Bootstrap 5.3+ 通过 data-bs-theme="light/dark" 属性控制主题，需配合 CSS 自定义变量、color-scheme 声明及 localStorage 持久化实现完整切换。
怎么用 data-bs-theme 切换白天/夜间模式
bootstrap 5.3+ 原生支持主题切换，核心是给 <html> 或 <body> 加 data-bs-theme 属性，值为 light 或 dark。它不是靠 js 动态改 class，而是靠 css 自定义属性（--bs-body-color、--bs-body-bg 等）响应式生效。
常见错误是只改了属性但没加载对应 CSS —— 必须确保你用的是 Bootstrap 5.3 及以上版本，且 CSS 文件包含 dark mode 变量定义（官方 CDN 或完整构建版默认包含）。
- 手动切：直接在控制台执行
document.documentElement.setAttribute('data-bs-theme', 'dark') - 页面加载时默认设暗色：在 HTML 中写
<html data-bs-theme="dark"> - 不推荐用
class="dark"模拟，会绕过 Bootstrap 主题机制，导致部分组件（如<table>、<form>）颜色不一致
为什么 prefers-color-scheme 不能直接替代 JS 切换
系统级偏好（prefers-color-scheme: dark）只能作为初始值参考，无法响应用户主动点击切换。Bootstrap 不自动监听该媒体查询变化，也不提供 fallback 逻辑。
真实场景中，用户更在意「我点一下就变」，而不是「系统变了我才变」。所以必须自己监听并同步更新 data-bs-theme。
- 检测当前偏好：
window.matchMedia('(prefers-color-scheme: dark)').matches - 但别只靠它初始化：用户可能刚切完系统主题，但网页已加载完毕，
matchMedia不会自动重触发 - 正确做法：用它设初始值 + 提供按钮手动覆盖 + 把选择存到
localStorage保证刷新不丢失
data-bs-theme 和自定义 CSS 变量怎么配合
Bootstrap 的暗色模式依赖一组预设的 CSS 变量，比如 --bs-body-bg: #212529。如果你覆盖了这些变量但没按主题分组，会导致 light/dark 下都用同一套值。
关键点在于：所有自定义颜色必须放在 [data-bs-theme="light"] 和 [data-bs-theme="dark"] 作用域里，否则会冲突。
code>[data-bs-theme="dark"] {
--bs-primary: #0d6efd;
--bs-body-bg: #212529;
}
[data-bs-theme="light"] {
--bs-primary: #0a580a;
--bs-body-bg: #fff;
}
- 别在全局写
:root { --bs-body-bg: ... }，这会覆盖两个主题 - 第三方组件（如 Chart.js）不读
data-bs-theme，需单独适配其 theme 配置 - 字体颜色建议用
color: var(--bs-body-color)而非固定值，才能随主题自动变
切换后表单控件、按钮、卡片为啥还是旧颜色
最常被忽略的是：Bootstrap 的部分组件（尤其是 <input>、<select>、<button>）默认样式由浏览器渲染，不受 CSS 变量控制。它们的颜色由 color-scheme CSS 属性或操作系统级设置影响。
例如 Chrome 下，<input type="checkbox"> 在暗色模式下仍可能显示浅灰边框，因为它的 appearance 是 native 的。
- 强制统一外观：加
appearance: none+ 手动画背景和边框 - 或用
color-scheme: light dark告诉浏览器允许按主题渲染原生控件（兼容性注意：Safari 15.4+、Chrome 93+） - 卡片阴影（
box-shadow）默认不随主题变，需显式写成box-shadow: var(--bs-box-shadow)并在两个[data-bs-theme]里分别定义
主题切换不是改一个属性就完事，它牵扯到变量作用域、浏览器原生行为、第三方库兼容性三个层面。最容易漏的是表单控件的 color-scheme 声明和本地存储的持久化逻辑。
