如何更改引导程序 5 中的主要背景颜色？答案

【问题标题】：How to change the primary background-color in bootstrap 5?如何更改引导程序 5 中的主要背景颜色？
【发布时间】：2022-08-09 20:36:13
【问题描述】：

我正在尝试更改 Bootstrap 5.2 主按钮背景颜色。

我使用 mpn 安装 Bootstrap 5.2。当我创建一个名为 my-bootstrap.scss 的文件时，我添加了以下内容

$primary: #047ec9;
@import \"../../node_modules/bootstrap/scss/bootstrap\";

编译scss代码后，果然原色背景变了！但是，主按钮的字体颜色也在进行中发生了变化。最初，字体颜色是白色的，我想保持白色。但是，$primary: #047ec9; 似乎也将字体颜色从白色更改为黑色。

如何在不更改字体颜色的情况下更改主/蓝色背景颜色？

最新版本的 bootstrap (v5.2.0) 具有处理 text-bg 组合的新类，以确保适当的对比度。见Color and Background

标签： css twitter-bootstrap sass bootstrap-5

【解决方案1】：

@Jay 您能否按照建议提供更大的代码 sn-p
Cristián 为 Bootstrap 5.2 实现了一个新类，用于设置文本和背景颜色例如：text-bg-light 或 text-bg-dark，设置具有对比前景色的背景颜色。但是甚至还有其他解决方案，您现在可以从 CSS 中覆盖此值，此版本的 Bootstrap 上的按钮使用 .btn 上的本地 CSS 变量来增强实时自定义。 CSS 变量的值是通过 Sass 设置的。

【讨论】：