自定义按钮中的 bootstrap 5 文本颜色对比度

Question

我正在使用bootstrap.build 自定义引导程序 5。 到目前为止，我没有问题。

但是，当我切换到反应项目时，事情出错了。 按钮内的文本变为黑色。 悬停时的大纲按钮也是如此。

我所做的只是自定义.scss文件，例如：

$orange: #e84c22;
$primary: $orange;

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

怎么了？

我的目标是使用确切的#e84c22颜色更改这些按钮，以仅使用btn btn-outline-primary和btn btn-primary类显示白色文本。

我试过将$yiq-contrasted-threshold更改为200但它没有改变任何东西。

那么，React 中的 Bootstrap 和 bootstrap.build 中的 Bootstrap 有什么区别？ 背后发生了什么？

这是 codesanbox.io 中的示例项目。 请查看它并告诉我我做错了什么。

Answer 1

查了一下源码，bootstrap.build/app用的是Bootstrap 4，不是Bootstrap 5，颜色对比逻辑从Bootstrap 4变成了Bootstrap 5，颜色对比阈值相差很大。

Bootstrap 4 使用了 YIQ 色彩空间...

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold:  150 !default;

Bootstrap 5 使用WCAG 2.0 算法

// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio:   4.5 !default;

比较两个版本，以及颜色逻辑：

使用4.x的色彩对比逻辑改变$主要以＃e84c22 -光文本颜色结果

使用 5.x 颜色对比逻辑将 $primary 更改为 #e84c22 - 导致文本颜色变深

---

因此，您的 Bootstrap 5 React SASS 自定义按预期工作，并且 bootstrap.build 仍在使用较旧的 4.x。

要在 Bootstrap 5（使用 React）中获得浅色文本颜色，您可以更改$min-contrast-ratio变量的默认值...

例如，将 $min-contrast-ratio 从 4.5 更改为 3 会使文本颜色与#e84c22形成鲜明对比：

$min-contrast-ratio: 3;
$orange: #e84c22;
$primary: $orange;

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

https://codeply.com/p/Z1tOoBclnH

正如 Bootstrap 5 SASS 中所解释的“WCAG 2.0 的可接受值为 3、4.5 和 7”。 或者，您可以使用我的相关答案中描述的 5.x 解决方案。 如果您希望进一步自定义 Bootstrap， themesstr.app （注意：我是创建者）已使用 Bootstrap 5.x 进行更新。