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

Posted 2023-03-05

【中文标题】在其中自定义 bootstrap 5 按钮颜色和属性

【英文标题】：Customizing bootstrap 5 button colors and properties in it

【发布时间】：2021-08-29 08:01:00

【问题描述】：

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

$primary: #e84c22;

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

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

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

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

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

额外信息： 不像btn-danger 默认为白色文本。 bootstrap中必须有根据颜色亮度修改文本颜色的函数。

【问题讨论】：

您更改了背景颜色并抱怨文本颜色。也许，您也需要更改文本颜色，例如$btn-primary-color: #fff? github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/…

@Anonymous 我会详细说明这个问题。这是因为默认情况下另一种颜色具有不同的属性。

@Anonymous - Bootstrap 5 中没有 $btn-primary-color。您链接到的 bootstrap-sass 项目是旧的 Bootstrap 3 从 LESS 到 SCSS 的转换。

【参考方案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 的值即可更改主主题颜色。