自定义按钮中的 bootstrap 5 文本颜色对比度 [英] Customize bootstrap 5 text color contrast in button

问题描述

我正在使用

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

But, when I switch to react project, things gone wrong. The text inside the button become black. same goes to the outline button when on hover.

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

All I did was customizing the .scss file such as this:

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

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

怎么了?

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

My aim here is to change these button with the exact #e84c22 color to display white text only using btn btn-outline-primary and btn btn-primary class.

我已经尝试将 $yiq-contrasted-threshold 更改为 200 但它没有改变任何东西.

I've tried changing $yiq-contrasted-threshold to 200 but it doesn't change anything.

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

So, what is the difference between Bootstrap in react and in bootstrap.build? what's happening behind it?

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

here's example project in codesanbox.io. please review it and tell me what did I do wrong.

推荐答案

从查看源码来看，bootstrap.build/app 使用的是 Bootstrap 4，不是 Bootstrap 5.颜色对比逻辑已经从Bootstrap 4变成了Bootstrap 5，颜色对比度阈值相差很大.

It appears from the checking the source that bootstrap.build/app is using Bootstrap 4, not Bootstrap 5. The color contrast logic has changed from Bootstrap 4 to Bootstrap 5, and the color contrast threshold is very different.

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

Bootstrap 4 used the YIQ color space...

// 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 算法

Bootstrap 5 uses the WCAG 2.0 algorithm

// 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;

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

Comparing the 2 versions, and the color logic:

使用 4.x 颜色对比逻辑将 $primary 更改为 #e84c22 - 结果浅色文字颜色

使用 5.x 颜色对比逻辑将 $primary 更改为 #e84c22 - 结果深色文字颜色

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

So, your Bootstrap 5 React SASS customizations are working as expected, and bootstrap.build is still using older 4.x.

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

To get the light text color in Bootstrap 5 (with React), you could change the default value of the $min-contrast-ratio variable...

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

For example, changing $min-contrast-ratio from 4.5 to 3 makes the text color light in contrast to #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".或者，您可以使用我的 相关答案.如果您想进一步自定义 Bootstrap，themesr.app(注意:我是创建者)已经使用 Bootstrap 5.x 更新.

As explained in the Bootstrap 5 SASS "the acceptable values for WCAG 2.0 are 3, 4.5 and 7". Alternatively, you can use the 5.x solutions described in my related answer. If you're looking to further customize Bootstrap, themestr.app (note: I'm the creator) has been updated with Bootstrap 5.x.

这篇关于自定义按钮中的 bootstrap 5 文本颜色对比度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！