bootstrap 5.3+ 深色模式必须通过 data-bs-theme 属性激活，依赖未压缩的 bootstrap.css 或 sass 编译，且变量需在 :root[data-bs-theme="dark"] 下定义，工具类生效还需浏览器支持 color-mix()。
没加 data-bs-theme 属性，变量根本不会激活
Bootstrap 5.3+ 的颜色模式（light/dark）完全依赖 data-bs-theme 属性触发，不是靠 class 或媒体查询自动切换。只写 <nav class="navbar navbar-dark"></nav> 没用——navbar-dark 在 v5.3+ 中已降级为兼容层，不启用深色变量。
必须在 或 上显式设置：
否则所有 --bs-* 深色变量（如 --bs-navbar-bg、--bs-link-color）都保持 light 模式默认值，你改了也白改。
- JS 动态切换时，要用
document.documentElement.setAttribute('data-bs-theme', 'dark')，不能只改 class - 服务端渲染或 SSR 场景下，确保该属性在首屏 HTML 中就存在，否则 hydration 前会闪白
- 检查 DevTools 的
Computed面板里--bs-navbar-bg的实际值，如果还是 light 模式下的色值，说明属性没生效
bootstrap.min.css 不含 CSS 变量定义
CDN 或 dist 目录下的 bootstrap.min.css 是压缩版，**移除了所有 CSS 自定义变量声明**（包括 --bs-primary、--bs-body-bg 等），只保留最终计算出的静态样式。你写的 :root { --bs-link-color: #3b82f6; } 在它之后加载，但变量本身根本不存在，自然无法被继承。
正确做法是：
- 换用完整未压缩版：
bootstrap.css（不是.min.css） - 或走 Sass 编译流程，确保
$enable-css-variables: true已启用 - 验证方式：在 DevTools 的 Styles 面板搜索
--bs-link-color，看是否能在 Bootstrap 的原始规则里找到定义
自定义变量写在了错误的作用域
变量继承是向上查找的，:root 声明全局有效，但如果你只在某个组件内部写 .my-card { --bs-text-primary: red; }，那只有该元素子树能读到；而 .card-title 这类工具类是从 :root 读变量的，不受局部影响。
深色模式变量必须限定作用域：
- 错：
:root { --bs-navbar-bg: #1a1d25; }→ 白天黑夜全变暗 - 对：
:root[data-bs-theme="dark"] { --bs-navbar-bg: #1a1d25; }→ 仅 dark 模式生效 - 如果页面同时支持系统偏好（
@media (prefers-color-scheme: dark)），需额外补一段媒体查询规则，不能只靠data-bs-theme
工具类名用了但底层没生成对应规则
像 text-body-tertiary、bg-opacity-10 这类 v5.3+ 新增工具类，依赖 color-mix() 和 CSS 变量链。旧浏览器（Safari ≤16.3、IE）不支持 color-mix()，会导致这些类直接退化为无样式或 fallback 色（如果有定义）。
检查是否生效：
- 打开 DevTools，选中元素，看
Computed里的color是否为预期值 - 若显示
color-mix(...)但渲染为空，大概率是浏览器不支持 - 临时降级方案：用
text-muted替代text-body-tertiary，它不依赖新特性
真正容易被忽略的是：变量和工具类是一套联动系统，缺一不可。漏掉 data-bs-theme、用错 CSS 文件、或浏览器能力不足，任何一个环节断掉，整条链就失效——不是“部分无效”，而是“彻底不走变量路径”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
