在 bootstrap 5.2 中自定义 css 变量必须满足三个条件：变量名准确（如 --bs-primary，非 --primary）、在 :root 中声明、且 css 文件加载顺序在 bootstrap.min.css 之后；还需同步设置 rgb 版本及组件专用变量，并为深色模式单独重写。
在 Bootstrap 5.2 中自定义 CSS 变量是可行的，但必须满足三个硬性条件：变量名准确、:root 声明、且 CSS 文件加载顺序在 bootstrap.min.css 之后——缺一不可，否则修改完全不生效。
变量名必须一字不差，拼错就白写
Bootstrap 5.2+ 全面使用 --bs- 前缀，旧版的 --primary 或 --bs-blue 都无效。常见变量名不能靠猜，得查文档或 DevTools 的 Computed 标签页确认：
-
--bs-primary：影响.btn-primary、.alert-primary、.form-check-input:checked等 -
--bs-btn-primary-bg：按钮背景色（不是--bs-primary，它只控制部分组件） -
--bs-pagination-bg：分页项背景，不是background-color -
--bs-body-font-size：全局字号基准，rem计算依赖它
写错一个字符（比如 --bs-prmiary），浏览器直接忽略，DevTools 里也看不到该变量被应用。
:root 是唯一可靠的作用域
你不能在某个 class 里设变量指望它“局部生效”，比如：.my-theme { --bs-primary: #e63946; } —— 这样只有后代元素继承该值，而 .btn-primary 不在 .my-theme 内部时完全不受影响。
真正生效的方式只有一种：
<style>
:root {
--bs-primary: #4a6fa5;
--bs-body-bg: #f8f9fa;
}
</style>
这段 <style></style> 必须放在 <link rel="stylesheet" href="bootstrap.min.css"> 之后，且不能被后续其他 :root 声明覆盖（检查 Elements → Styles 面板，看变量是否被 strike-through）。
RGB 版本要手动补全，否则部分组件失效
改了 --bs-primary，不代表所有用到主色的地方都自动更新。例如 .btn-outline-primary 实际读的是 --bs-primary-rgb，不是 --bs-primary；.alert-primary 文字色依赖 --bs-primary-text-emphasis。
所以常见组合必须一起设：
-
--bs-primary和--bs-primary-rgb（格式如74, 111, 165） -
--bs-btn-primary-bg、--bs-btn-primary-border-color、--bs-btn-primary-hover-bg、--bs-btn-primary-disabled-bg（按钮四状态） -
--bs-pagination-color、--bs-pagination-bg、--bs-pagination-border-color（分页三要素）
漏掉任一，对应组件就会回退默认色或显示异常（比如文字看不见、边框消失）。
深色模式需单独处理，变量不自动切换
Bootstrap 5.2 不会根据 prefers-color-scheme 自动切换 CSS 变量值。如果你用了深色主题，必须显式重写：
@media (prefers-color-scheme: dark) {
:root {
--bs-primary: #93c5fd;
--bs-body-bg: #0f172a;
--bs-btn-primary-bg: #1e40af;
}
}
注意：这里不是覆盖，而是重新声明。深色模式下所有变量都要重新赋值，包括 RGB 版本——否则 rgba(var(--bs-primary-rgb), .5) 仍会用白天的 RGB 值，导致颜色发灰或对比度不足。
最易被忽略的是变量链式依赖：改 --bs-primary 本身不会触发 --bs-btn-primary-bg 自动更新，后者是独立变量。你以为改一个就全局换色，其实只是开了个口子，后面全是手动填坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
