需用 CSS 变量接管 Bootstrap 颜色体系：在 :root 定义明色值，[data-bs-theme="dark"] 中重写暗色值，并确保 Bootstrap CSS 后加载；自定义组件须统一使用 var(--bs-xxx) 而非硬编码颜色。
如何用 CSS 变量接管 Bootstrap 的颜色体系
Bootstrap 5.3+ 原生支持深色模式，但默认只靠 data-bs-theme="dark" 属性触发，不自动响应系统偏好或手动切换。真要全局可控，必须把关键颜色抽成 CSS 变量，再让组件样式读取这些变量——否则改一处，漏十处。
核心做法是覆盖 Bootstrap 的 $body-color、$primary、$bg-body 等 Sass 变量为 CSS 自定义属性，并在 :root 和 [data-bs-theme="dark"] 下分别定义明/暗两套值。
- 别直接改
bootstrap.css，它没导出变量；必须从 Sass 源码编译，或用@layer base+:root覆盖 - Bootstrap 的按钮、表单、卡片等组件内部用的是
var(--bs-primary)这类变量，但它们默认只在 dark 主题下才重设——你需要提前在 :root 中定义所有变量，再在[data-bs-theme="dark"]里批量重写 - 注意顺序：
:root定义明色系 →[data-bs-theme="dark"]覆盖暗色系 → 确保 Bootstrap 的 CSS 在其后加载，否则变量读不到
data-bs-theme 切换时为什么按钮没变色
常见现象：加了 data-bs-theme="dark" 到 ，但 还是蓝底白字，没变紫灰底。
根本原因是 Bootstrap 的 .btn-primary 默认用 background-color: var(--bs-primary)，而 --bs-primary 这个变量只在 [data-bs-theme="dark"] 规则块里被重定义——如果你没自己写这层规则，它就永远是浅色值。
- 必须手动写：
:root { --bs-primary: #0d6efd; } [data-bs-theme="dark"] { --bs-primary: #6ea8ff; } - 别依赖 Bootstrap 自带的
bootstrap-dark.css，它只是整包替换，不支持变量级动态切换 - 检查浏览器开发者工具的“计算样式”，看
background-color最终解析值是否还是浅色——如果是，说明变量没被重写，或选择器优先级不够
如何让自定义组件也响应 data-bs-theme
你写的 .card-dashboard 或 .badge-status 不会自动跟着变色，因为它们没读 CSS 变量。
统一做法：所有颜色相关声明，一律用 var(--bs-xxx)，而不是硬编码 #212529 或 rgba(0,0,0,.8)。
- 比如：
color: var(--bs-body-color); background-color: var(--bs-card-bg); border-color: var(--bs-border-color) - 如果要用半透明叠加（如遮罩层），别写
rgba(0,0,0,.5)，改用color-mix(in srgb, var(--bs-body-color) 50%, transparent)（现代浏览器）或hsla()手动转——否则深色下会过黑 - 图标颜色同理：SVG 的
fill也要绑定var(--bs-icon-color)，别用内联fill="#333"
兼容性与性能要注意什么
CSS 变量本身兼容到 Chrome 49 / Firefox 31，但 color-mix、relative color syntax 这些增强能力只在新浏览器可用。别为了炫技牺牲基础可用性。
- 深色模式切换不要靠 JS 动态改 class 再重绘全页；用
document.documentElement.setAttribute('data-bs-theme', 'dark')即可，CSS 变量会自动响应 - 避免在
:root里定义几十个变量，只覆盖实际用到的：至少包括--bs-body-color、--bs-body-bg、--bs-primary、--bs-border-color、--bs-card-bg、--bs-emphasis-color - 移动端 Safari 对
[data-bs-theme="dark"] .btn这类嵌套选择器有轻微渲染延迟，可加transform: translateZ(0)强制硬件加速（仅必要时）
最易被忽略的一点：系统级深色偏好（prefers-color-scheme: dark）和 data-bs-theme 是两套逻辑，别指望它们自动同步。需要 JS 监听并手动设置属性，否则用户切系统主题，页面毫无反应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
