如何使用 CSS 变量更改控件颜色？答案

【问题标题】：How to change control colors with CSS variables?如何使用 CSS 变量更改控件颜色？
【发布时间】：2022-10-27 18:36:01
【问题描述】：

引导 v5.2.2。

Bootstrap 团队添加了几个CSS variables 用于实时定制。

今天我想改变所有“主要”控件的颜色在飞行中.

<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;
      }
   </style>
</head>
<body>
   <button type="button" class="btn btn-primary">Hello</button>
   <div class="spinner-border text-primary"></div>
</body>
</html>

在我的示例中，我希望两个控件都是“绿色”的，但事实并非如此。我显然做错了——或者我可能不理解使用 CSS 变量配置 Bootstrap 的整个概念。

请问有什么帮助吗？

我知道我可以在编译时通过 scss 修改所有颜色，但在我的场景中这是不是一个选项。我需要一个（简单）运行解决方案。

【问题讨论】：

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

--bs-primary 是不曾用过在 btn-primary 类中。除非您使用 SASS，否则无法做到这一点请参阅此示例。 https://www.codeply.com/p/iauLPArGqE 您可以做的是在 VS 代码中使用实时 SASS 编译器

【讨论】：

哦，真可惜。真的没有办法通过 CSS 变量改变按钮等的颜色吗？甚至不通过修改主题（通过 CSS 变量）？你知道他们为什么要添加 CSS 变量吗？谢谢你，蒂兰卡！