Bootstrap v5.2.2中如何用CSS变量实时修改Primary控件颜色？

你只修改--bs-primary没生效的核心原因是：Bootstrap 5.2.2里大部分关联组件的样式，依赖的是RGB格式的CSS变量（比如--bs-primary-rgb），而非直接用十六进制的--bs-primary。像text-primary文本色、btn-primary背景色这些，都是通过rgba(var(--bs-primary-rgb), ...)这种方式结合透明度实现的，只改十六进制变量覆盖不了这些样式。

正确的运行时修改方案 #

在:root中同时修改--bs-primary和对应的--bs-primary-rgb变量即可，示例代码如下：

<html>
<head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
   <style>
      :root {
         --bs-primary: green;
         --bs-primary-rgb: 0, 128, 0; /* 对应green的RGB数值，逗号分隔不要加括号 */
      }
   </style>
</head>
<body>
   <button type="button" class="btn btn-primary">Hello</button>
   <div class="spinner-border text-primary"></div>
</body>
</html>

这样修改后，按钮和spinner都会变成绿色。如果需要通过JavaScript动态调整颜色，也可以用同样的逻辑修改这两个变量：

// 示例：改成青绿色
document.documentElement.style.setProperty('--bs-primary', '#2ecc71');
document.documentElement.style.setProperty('--bs-primary-rgb', '46, 204, 113');

内容的提问来源于stack exchange，提问作者Ingmar