自定义 bootstrap 5 按钮的颜色和属性

“必须有根据引导程序中的颜色亮度修改文本颜色的功能。”

按钮由 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。

该WCAG 2.0算法在这里解释。根据 WCAG 算法，您使用的红色刚好足以将文本颜色翻转为深色。

制作自定义红色的颜色略暗将翻转文字颜色为白色...

$primary: #d73b11;

@import "bootstrap";    

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

$primary: #e84c22;

@import "bootstrap";

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

演示

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