必须一次性定义--bs-primary、--bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-bg-subtle、--bs-primary-border-subtle这5个变量，缺一即导致按钮悬停、边框、标题等回退默认蓝色；所有变量须在:root中声明且加载于bootstrap css之后。
只改 --bs-primary 没用，按钮悬停、边框、标题文字全会回退默认蓝色——Bootstrap 5.3+ 的组件依赖一整套配套变量协同计算，漏掉任何一个，对应样式就失效。
必须一次性定义的 5 个主色变量
Bootstrap 不是读 --bs-primary 就完事，而是用它派生出多个状态色。这 5 个变量缺一不可，且命名、格式、作用域都必须严格匹配：
-
--bs-primary：十六进制主色（如#2563eb） -
--bs-primary-rgb：纯数字三元组（如37, 99, 235），不能带括号、空格或单位，否则rgba(var(--bs-primary-rgb), .1)解析失败 -
--bs-primary-text-emphasis：用于.card-title等深色文字，需手动设为满足 WCAG 对比度的值（如主色是#2563eb，推荐#1d4ed8） -
--bs-primary-bg-subtle：浅背景色（如#e0f2fe），不是自动生成，得自己算 -
--bs-primary-border-subtle：浅边框色（如#93c5fd），通常比主色浅 20% 左右
示例写法（必须放在 :root 中）：
:root {
--bs-primary: #2563eb;
--bs-primary-rgb: 37, 99, 235;
--bs-primary-text-emphasis: #1d4ed8;
--bs-primary-bg-subtle: #e0f2fe;
--bs-primary-border-subtle: #93c5fd;
}
加载顺序和作用域最容易踩坑
变量声明位置错了，等于没写：
- 必须写在
:root下，写在.my-app或组件 scoped style 里，.btn-primary根本读不到 - 必须在 Bootstrap 官方 CSS 之后加载——
<link rel="stylesheet" href="bootstrap.min.css">后面紧跟你的<style></style>或自定义 CSS 文件 - 如果用了构建工具（Webpack/Vite），确认你的 CSS 没被提前打包或压缩到 Bootstrap 前面
- 深色模式下，
[data-bs-theme="dark"]内必须重写整套变量，CSS 变量不会自动反转
哪些地方能响应，哪些根本不管用
别指望所有 class 都跟着变：
- ✅ 能响应的：
.btn-primary、.alert-primary、.form-control:focus、.tooltip（需额外设--bs-tooltip-bg）、.link-primary - ❌ 不响应的：
.text-primary和.bg-primary是编译时生成的 class，不读变量；原生<a></a>标签也不变，得手动加规则：a:link, a:visited { color: var(--bs-link-color); } - ❌ 伪元素和媒体查询里不能用：
::before { content: var(--bs-primary); }会原样输出字符串；@media (prefers-color-scheme: var(--bs-dark-mode))是非法语法
真正要稳，就得把这 5 个变量当一个原子单元来管理——改一个，五个全上；换主题，整套替换；加深色模式，两套并存。漏掉任意一个，某个角落的边框或文字就会突然“掉色”，而且很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
