直接改--bs-primary无效，因Bootstrap 5.3+依赖--bs-primary-rgb、--bs-primary-text-emphasis等整套变量链，漏一即导致悬停/边框/文字等状态回退默认蓝；必须在:root声明全链并在[data-bs-theme="dark"]中完整重写，且切换后需调用bootstrap.Theme.getOrCreateInstance().update()刷新。
直接改 --bs-primary 不会生效，必须同步设置整套配套变量，并在 [data-bs-theme="dark"] 下重定义——否则按钮悬停、边框、文字强调色全乱。
为什么只设 --bs-primary 按钮 hover 还是蓝色？
Bootstrap 5.3+ 的状态样式不直接读 --bs-primary，而是依赖计算链：--bs-primary-rgb 用于 rgba(var(--bs-primary-rgb), .1) 背景，--bs-primary-text-emphasis 控制标题对比度，--bs-primary-border-subtle 决定边框浅色。漏掉任意一个，对应状态就 fallback 到默认蓝。
-
--bs-primary-rgb必须是纯数字三元组，如74, 111, 165，不能带括号或空格 -
--bs-primary-text-emphasis影响.card-title、.badge等文字可读性，不设会导致浅背景上文字发灰 - 所有变量必须声明在
:root，写在局部选择器里组件读不到
如何安全覆盖整套主色变量？
一次性在 :root 中声明完整变量链，避免零敲碎打。深色模式下必须单独重写，CSS 变量不会自动反转。
- 浅色主题示例：
:root { --bs-primary: #4a6fa5; --bs-primary-rgb: 74, 111, 165; --bs-primary-text-emphasis: #2c3e50; --bs-primary-bg-subtle: #e8f0ff; --bs-primary-border-subtle: #b8d0ff; } - 深色主题必须加
[data-bs-theme="dark"]前缀重写整套值，否则切换后仍用浅色变量 - 自定义 CSS 文件必须加载在 Bootstrap 官方 CSS 之后，否则变量被忽略
切换时为什么必须调用 bootstrap.Theme.getOrCreateInstance().update()？
Bootstrap 不监听 data-bs-theme 属性变化，只设属性不刷新变量，样式不会重算——尤其在 Safari 和旧版 Chrome 中，按钮、工具提示等组件会卡在旧状态。
立即学习“前端免费学习笔记（深入）”；
- 确保已引入
bootstrap/js/dist/theme.js（CDN 推荐用 ESM 版：https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.esm.js） - 正确写法：
bootstrap.Theme.getOrCreateInstance(document.documentElement).update() - 切记操作对象是
document.documentElement（即<html>），不是body或其他容器 - 值必须为小写字符串
'light'或'dark'，不能是true、'Dark'
哪些地方能用 var(--bs-primary)，哪些不能？
能响应的组件有限：按钮背景、表单焦点边框、警告框、徽章、工具提示（--bs-tooltip-bg）、链接类（.link-primary）等原生适配部分；但以下完全不响应：
-
.text-primary和.bg-primary仍是编译时生成的 class，运行时变量无效 - 伪元素
::before/::after的content属性不支持var()，content: var(--title)会原样输出字符串 -
@media查询条件不能用变量，@media (prefers-color-scheme: var(--bs-dark-mode))是非法语法 - 第三方库（如 Selectize.js、Bootstrap Icons）默认不读这些变量，需手动重构其样式
最易被忽略的是变量链完整性——改一个色，要同步补全 RGB、文本强调、背景/边框衍生色共 5 个以上变量；少一个，某个角落的边框或文字就会突然“掉色”。
