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

Question

我在我的项目中创建了我的

custom.scss

，并完成了以下操作：

$primary: #e84c22;

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

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

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

我对

btn-primary

类中的文字不满意。默认情况下，它是深色常规字体。 我想将其更改为 白色和粗体文本，而不向按钮元素添加

text-light

和

fw-bold

类。 我原本以为会是这样的：

如何通过修改

custom.scss

来做到这一点？

额外信息：
不像

btn-danger

默认情况下它是白色文本。 bootstrap中一定有一个根据颜色亮度修改文字颜色的函数。

Answer 1

“必须有一个函数可以根据设置修改文字颜色 bootstrap 中的颜色亮度。”

是的，它使用此处解释的WCAG 2.0 算法。根据 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 的值即可更改主主题颜色。

Answer 2

正确且最安全的方法是创建颜色图并将其添加到现有的引导程序中。这将保留所有引导颜色。

为此，您首先需要将函数和变量包含在您的

custom.scss

文件中。

步骤1

先导入

functions

和

variables

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

步骤2

您需要定义您的地图。不要使用

$theme colors

，正如 @carol 所说，它会消除其他颜色，而是创建你自己的地图

$mycolors: (
  "primary": #e84c22,
);

步骤3

创建后，您可以使用

theme-colors

 与现有 

map-merge()

合并

$theme-colors: map-merge($theme-colors, $mycolors);

步骤4

在最后包含您的引导程序

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

最终代码

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$mycolors: (
  "primary": #e84c22,
);
$theme-colors: map-merge($theme-colors, $mycolors);

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

输出

对比度问题

您输入的对比度不足以更改文本颜色。请注意，颜色不符合小文本的要求。

为了修复颜色，我将滑块更改回一级

让我们使用新颜色

$custom: (
    "orange": #C52B03
);

资源

https://venngage.com/tools/color-contrast-checker