只改--bs-primary按钮悬停仍为蓝色，因Bootstrap 5.3+依赖--bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-border-subtle等5个变量协同计算状态色，漏一即回退默认值。
直接改 --bs-primary 但按钮悬停还是蓝色？说明你只动了主色，漏掉了整套配套变量链——Bootstrap 5.3+ 的组件不靠单个变量驱动，而是用一串协同变量计算状态、透明度和对比度。
为什么只改 --bs-primary 按钮悬停仍为默认蓝色
因为 .btn-primary:hover 实际用的是 rgba(var(--bs-primary-rgb), .1)，不是 var(--bs-primary)；.card-title 读的是 --bs-primary-text-emphasis，.border-primary 依赖的是 --bs-primary-border-subtle。漏掉任意一个，对应样式就 fallback 到 Bootstrap 默认值。
-
--bs-primary-rgb必须是纯数字三元组（如74, 111, 165），不能带括号、空格或单位，否则rgba()解析失败 -
--bs-primary-text-emphasis决定文字是否够深/够浅，不设它会导致浅背景上标题看不清 -
--bs-primary-bg-subtle和--bs-primary-border-subtle不是自动生成的，得手动算（通常比主色浅 20% 左右）
--bs-primary 等变量必须在 :root 中声明且加载顺序严格
写在 .my-app 或组件 scoped style 里，.btn-primary 根本读不到；变量必须出现在 Bootstrap 官方 CSS 之后，否则被覆盖。
- HTML 中确保
<link rel="stylesheet" href="bootstrap.min.css">在你的自定义 CSS 之前 - 构建工具（Vite/Webpack）中检查 CSS 打包顺序，避免你的主题文件被提前压缩进 vendor chunk
- 深色模式下，
[data-bs-theme="dark"]内必须重写全部 5 个变量——CSS 变量不会自动反转
哪些地方真能响应 --bs-primary，哪些根本不管用
能响应的：按钮背景、表单焦点边框（.form-control:focus）、警告框（.alert-primary）、工具提示（需额外设 --bs-tooltip-bg）、链接类（.link-primary）。
立即学习“前端免费学习笔记（深入）”；
-
.text-primary和.bg-primary是编译时生成的 class，不读变量——想全局变色，得手动加规则，比如a:link { color: var(--bs-link-color); } - 伪元素（
::before）和媒体查询（@media）里不能用var(--bs-primary)，语法非法 - 第三方组件（如 Bootstrap Icons、某些验证插件）完全不读这些变量，得单独覆盖
局部主题切换不能靠 data-bs-theme 加在容器上
data-bs-theme 只作用于 ，给 <div> 加它没用。局部主题必须用自定义属性 + 作用域隔离，比如 <code>data-theme-zone="card-dark" 配合 [data-theme-zone="card-dark"] { --bs-card-bg: #212529; }。
- 自定义 CSS 文件必须放在
bootstrap.min.css之后引入，否则变量未定义 - 不要在局部区域写死颜色值（如
.card { background: #212529; }），这会直接覆盖var(--bs-card-bg) - 浏览器开发者工具里检查“Computed”面板，确认目标元素的
background-color确实取自你定义的变量，而不是硬编码值或默认值
最容易被忽略的是：所有 5 个主色变量必须一次性配齐，且命名、格式、作用域全对；漏一个，某个角落的边框、文字或悬停态就会突然“掉色”，而且很难定位到根源。
