在其中自定义 bootstrap 5 按钮颜色和属性

Question

我在我的项目中创建了我的custom.scss，并做到了这一点：

$primary: #e84c22;

$theme-colors: (
  primary: $primary,
);

@import "~bootstrap/scss/bootstrap.scss";

到目前为止，颜色是这样的：

我对@9​​87654330@ 类中的文本不满意。默认情况下，它是深色和常规字体。 我想将其更改为 白色和粗体文本，而不向按钮元素添加 text-light 和 fw-bold 类。 我希望它是这样的：

我怎样才能通过修改custom.scss来做到这一点？

额外信息：
不像btn-danger

默认为白色文本。 bootstrap中必须有根据颜色亮度修改文本颜色的函数。

Answer 1

"必须有一个函数可以根据 bootstrap 中的颜色亮度。”

是的，它使用的是WCAG 2.0 algorithm explained here。根据 WCAG 算法，您使用的红色刚好足以将文本颜色转换为深色。

按钮是由 mixins 创建的（参见文档中的Buttons）。在这种情况下，button-variant mixin $color 的第三个参数定义为：

$color: color-contrast($background, $color-contrast-dark, $color-contrast-light, $min-contrast-ratio)

所以按钮的颜色是$color-contrast-dark 或$color-contrast-light，这取决于使用$min-contrast-ratio 的WCAG 2.0 计算。

因此，使自定义的红色颜色稍微变暗会将文本颜色翻转为白色...

$primary: #d73b11;

@import "bootstrap";    

或者，您可以使用原始的自定义颜色并像这样在btn-primary 上强制使用白色粗体文本...

$primary: #e84c22;

@import "bootstrap";

.btn-primary {
    color: #fff;
    font-weight: bold;    
}   

Demo

或者，

您可以将 $min-contrast-ratio 变量的较低值（3、4.5 和 7 是可接受的值）设置为 shown in this answer

---

另请注意，您重新定义主题颜色映射的方式是消除所有其他主题颜色。您只需更改 $primary 的值即可更改主主题颜色。