直接改--bs-primary等CSS变量可全局换主题色，但必须确保CSS在Bootstrap主文件之后加载，且需同步更新--bs-primary-rgb等衍生变量；IE不支持，应避免使用。
直接改 --bs-primary 这类变量就能换主题色，但必须确保你的 CSS 加载在 Bootstrap 主文件之后，否则变量不会生效；IE 完全不支持，别踩这个坑。
如何安全覆盖 --bs-primary 等颜色变量
全局覆盖最简单，但风险高：在 :root 里重写会立刻影响所有 .btn-primary、.alert-primary、.text-primary。实际项目中更推荐按需隔离：
- 给目标区域加一个稳定 class，比如
class="marketing-section" - 用该 class 作为前缀重设变量：
.marketing-section { --bs-primary: #6a5acd; --bs-primary-rgb: 106, 74, 205; } - 务必同步更新
--bs-primary-rgb—— Bootstrap 5.3+ 的rgba(var(--bs-primary-rgb), .5)会直接失效，如果只改了主色却漏掉 RGB 版本 - 别用
style="--bs-primary: red"写在元素上：CSS 变量不继承，子元素（比如按钮内部）拿不到这个值
var(--bs-primary) 能用在哪、不能用在哪
它能在任何接受 CSS 值的地方用：颜色、背景、边框、阴影、甚至 filter: brightness(var(--bs-opacity))。但有两个硬限制：
-
@media查询里不能用变量，@media (prefers-color-scheme: var(--bs-dark-mode))是非法语法，浏览器直接忽略整条规则 -
::before或::after的content属性不解析变量，content: var(--bs-title)会原样输出字符串var(--bs-title) - Sass 里不能混用函数和变量，
color: darken(var(--bs-primary), 10%)会编译报错——CSS 函数无法处理运行时变量值
用 JS 动态修改 --bs-primary 时要注意什么
document.documentElement.style.setProperty('--bs-primary', '#e74c3c') 确实能立刻生效，但别以为组件会“自动响应”：
立即学习“前端免费学习笔记（深入）”；
-
.btn-primary这类纯 CSS 组件会马上变色，没问题 - 依赖 JS 初始化的组件（如
Toast、Dropdown）可能卡在旧样式里，因为它们初始化时读了一次变量值，之后不再监听变化 - 没手动触发重绘或强制刷新内联样式的话，这些组件看起来就“没反应”
- 如果用了
data-bs-theme="dark"切换暗色模式，记得同时更新你自定义的变量，否则颜色和主题逻辑脱节
真正麻烦的是变量链式依赖：改一个 --bs-primary，可能牵出 --bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-border-subtle 一堆衍生变量。不查 Bootstrap 源码里的 _variables.scss，很容易只改一半，结果按钮变了色，边框还是默认灰。
