css - 自定义按钮中的 bootstrap 5 文本颜色对比度
问题描述
我正在使用bootstrap.build 自定义引导程序 5 。到目前为止,我没有任何问题。
但是,当我切换到react项目时,事情就出错了。按钮内的文本变为黑色。悬停时,大纲按钮也是如此。
我所做的只是自定义.scss
文件,如下所示:
$orange: #e84c22;
$primary: $orange;
@import "~bootstrap/scss/bootstrap.scss";
怎么了?
我的目标是用确切的颜色更改这些按钮,以#e84c22
仅使用btn btn-outline-primary
和btn btn-primary
类显示白色文本。
我试过改变$yiq-contrasted-threshold
,200
但它没有改变任何东西。
那么,Bootstrap in react 和 bootstrap.build 有什么区别呢?背后发生了什么?
解决方案
从查源来看,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 颜色对比逻辑将 $primary 更改为 #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,themestr.app(注意:我是创建者)已使用 Bootstrap 5.x 进行了更新。
推荐阅读
- machine-learning - 如何为我的全连接神经网络找到合适的架构?
- python - Python类型:类型化字典或defaultdict扩展类
- php - 上传来自 php://input 的图片
- javascript - 在javascript中使用正则表达式突出显示不属于另一个单词的特定单词
- ios - 尝试从方法返回协议关联类型时出错
- python - 用于 Google Play 商店抓取的 Python API
- angular - 如何使用 Angular 8.0.2 隐藏 API 密钥
- python - 求解系统微分方程(太阳和木星轨迹)
- php - 如何使用 preg_match php 从 Web 内容中提取版本号
- c++ - bison/flex:计算器将双精度值解释为整数,所以我添加了 #define YYSTYPE 双精度,但出现多个编译错误