只改--bs-primary没用，因bootstrap 5.3+组件依赖--bs-primary-rgb、--bs-primary-text-emphasis等6个变量协同生效，漏一即导致悬停、边框或文字强调色回退默认值；--bs-primary-rgb须为纯数字三元组（如37, 99, 235），格式错误将致rgba解析失败；深色模式需在[data-bs-theme="dark"]下显式重定义全套变量，否则对比度不足；自定义css必须在bootstrap css之后加载，且变量作用域不自动隔离。
为什么只改 --bs-primary 没用
因为 Bootstrap 5.3+ 的组件不是靠单个变量驱动的，而是依赖一整套协同变量：比如 .btn-primary:hover 用的是 rgba(var(--bs-primary-rgb), .1)，不是 --bs-primary；.text-primary 在深色背景下的可读性取决于 --bs-primary-text-emphasis；.border-primary 的浅边框色来自 --bs-primary-border-subtle。漏掉任意一个，对应状态就会回退到默认值或显示异常。
--bs-primary-rgb 格式错会导致解析失败
--bs-primary-rgb 必须是纯数字三元组，例如 37, 99, 235，不能带括号、单位或空格（如 (37, 99, 235) 或 37 99 235）。否则 rgba(var(--bs-primary-rgb), .1) 解析失败，浏览器会忽略整个声明，直接 fallback 到未定义行为——常见表现是悬停背景消失或变黑。
深色模式下变量不自动反转
Bootstrap 不会根据 [data-bs-theme="dark"] 自动推导新值。如果你只在 :root 里重写了主色变量，那在深色模式下它们依然沿用同一套值，很可能导致文字对比度不足、边框不可见等问题。必须显式为深色上下文单独定义：
:root[data-bs-theme="dark"] {
--bs-primary: #3b82f6;
--bs-primary-rgb: 59, 130, 246;
--bs-primary-text-emphasis: #2563eb;
--bs-primary-bg-subtle: #1e3a8a;
--bs-primary-border-subtle: #374151;
}
自定义 CSS 加载顺序和作用域限制
即使变量写对了，也可能被覆盖或失效：
- 必须确保自定义 CSS（含变量重定义）在 Bootstrap 的 CSS 之后加载，否则会被覆盖
- CSS 变量是全局的，但若项目用了命名空间隔离（如
:where(.my-bs)），变量仍作用于:root，不会自动限定在该作用域内——需手动在命名空间块内重复定义 - 硬编码样式（如
.my-card { border-color: #0d6efd; }）完全不响应变量变化，这类规则要主动替换为var(--bs-primary)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
