只改--bs-primary按钮悬停仍为蓝色，是因为Bootstrap 5组件依赖--bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-border-subtle等配套变量计算状态色，漏设任一变量会导致:hover等状态回退默认值；必须在:root中一次性定义完整变量链，且深色模式需单独重写。
只改 --bs-primary 会出错——按钮悬停、边框、文字强调色全乱，因为 Bootstrap 5 组件依赖一整套配套变量计算状态和透明度，漏掉任一个就回退默认值。
为什么改了 --bs-primary 按钮悬停还是蓝色？
Bootstrap 5 的 .btn-primary:hover 不直接读 --bs-primary，而是用 rgba(var(--bs-primary-rgb), .1) 做背景；.card-title 用 --bs-primary-text-emphasis 控制深色文字对比度；.border-primary 依赖 --bs-primary-border-subtle。漏设其中任意一个，对应样式就会失效或 fallback 到原始蓝色。
-
--bs-primary-rgb必须是纯数字三元组（如74, 111, 165），不能带括号、空格或单位，否则rgba()解析失败 -
--bs-primary-text-emphasis决定卡片标题、徽章文字是否够黑/够白，不设它会导致浅色背景上文字看不清 - 所有变量必须在
:root中声明，作用域不对（比如只写在.my-card里）会导致组件读不到
如何安全覆盖整套主色变量？
一次性定义完整变量链，避免零敲碎打：
: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;
}
注意三点：
立即学习“前端免费学习笔记（深入）”；
- 变量名严格匹配，
--bs-primary-rgb少个-rgb后缀，透明背景就失效 - 如果项目支持深色模式，必须在
[data-bs-theme="dark"]下单独重写这套变量——CSS 变量不会自动反转 - 自定义 CSS 必须加载在 Bootstrap 官方 CSS 之后，否则变量被忽略
哪些地方能用 var(--bs-primary)，哪些不能？
能用：按钮背景、表单焦点边框、警告框、徽章、工具提示（--bs-tooltip-bg）、链接类（.link-primary）等原生适配组件。
不能用：
-
.text-primary和.bg-primary—— 这些仍是编译时生成的 class，不响应运行时变量 - 伪元素
::before/::after的content属性，content: var(--bs-title)会原样输出字符串 -
@media查询条件，@media (prefers-color-scheme: var(--bs-dark-mode))是非法语法 - 第三方组件（如 Bootstrap Icons、某些表单验证插件）完全不读这些变量
自定义组件怎么响应主题切换？
你写的 .card-dashboard 或 .badge-status 不会自动变色，因为它们没读变量。
- 所有颜色必须显式写成
color: var(--bs-body-color)、background-color: var(--bs-primary)，不能硬编码#fff或rgb(33, 37, 41) - 确保你的 CSS 文件在 Bootstrap CSS 之后加载，并且选择器优先级足够（必要时加
!important验证） - 检查开发者工具“计算样式”，确认最终值是解析后的颜色，而不是回退的默认值
最容易被忽略的是变量链完整性——改一个颜色，却忘了同步更新它的 RGB、文本强调色、边框浅色这三者，某个角落的边框或文字就会突然“掉色”。
