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

Question

我已经在我的项目中创建了我的 custom.scss，并完成了这个：

$primary: #e84c22;

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

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

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

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

如何修改 custom.scss？

补充信息：
不同于 btn-danger

默认为白色文本。 bootstrap.

中一定有根据颜色亮度修改文字颜色的函数

Answer 1

"There must be a function to modify the text color according to the color brightness in 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;    
}

或者，

您可以在 $min-contrast-ratio 变量上设置一个较低的值（3、4.5 和 7 是可接受的值）如

另请注意，您重新定义主题颜色映射的方式是清除所有其他主题颜色。你只需要改变$primary的值就可以改变主主题颜色。

Customizing bootstrap 5 button colors and properties in it