自定义bootstrap5按钮的颜色和属性
我custom.scss在我的项目中创建了我的，并完成了这个：
$primary: #e84c22;
$theme-colors: (
primary: $primary,
);
@import "~bootstrap/scss/bootstrap.scss";
到目前为止，颜色是这样的：
我对btn-primary课内的课文不满意。默认情况下，它是深色和常规字体。我想将其更改为白色和粗体文本，而无需向按钮元素添加text-light和fw-bold类。我希望它是这样的：
我怎样才能通过修改来做到这一点custom.scss？
额外信息：
不像btn-danger
默认为白色文本。必须有一个功能可以根据引导程序中的颜色亮度修改文本颜色。
回答
“必须有根据引导程序中的颜色亮度修改文本颜色的功能。”
是的，它使用了此处解释的WCAG 2.0 算法。根据 WCAG 算法，您使用的红色刚好足以将文本颜色翻转为深色。
按钮由 mixins 创建（请参阅：文档中的按钮）。在这种情况下，button-variantmixin的第三个参数$color定义为：
$color: color-contrast($background, $color-contrast-dark, $color-contrast-light, $min-contrast-ratio)
因此，按钮的颜色或者是$color-contrast-dark或$color-contrast-light，取决于WCAG 2.0计算使用$min-contrast-ratio。
因此，使得定制红色的颜色略暗将翻转文字颜色为白色...
$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 的值即可更改主主题颜色。