我在项目中创建了custom.scss
,并执行了以下操作:
$primary: #e84c22;
$theme-colors: (
primary: $primary,
);
@import "~bootstrap/scss/bootstrap.scss";
到目前为止,颜色是这样的:
我对btn-primary
类内部的文本不满意。默认情况下,它是深色和常规字体。我想将其更改为白色和粗体文本,而不向button元素添加text-light
和fw-bold
类。我以为是这样的:
如何修改custom.scss
?
额外信息:
与btn-danger
不同
默认为白色文本。在bootstrap中必须有一个根据颜色亮度修改文本颜色的函数。
1条答案
按热度按时间6vl6ewon1#
“必须有一个功能,可以根据 Bootstrap 中的颜色亮度修改文本颜色。”
是的,它使用的是这里解释的WCAG 2.0算法。根据WCAG算法,您使用的红色刚好足以将文本颜色翻转为深色。
由mixin创建的数组(请参见:文档中的按钮)。在这种情况下,
button-variant
mixin$color
的第三个参数定义为:因此按钮的颜色是
$color-contrast-dark
或$color-contrast-light
,这取决于WCAG 2.0使用$min-contrast-ratio
的计算。因此,使自定义红色颜色 * 稍微 * 暗一点将使文本颜色翻转为白色...
btn-primary
上强制使用白色粗体文本,如下所示.Demo
或者...
您可以将
$min-contrast-ratio
变量的值设置得更低(3、4.5和7是可接受的值),如shown in this answer另外请注意,重新定义主题颜色Map的方式会消除所有其他主题颜色。您只需要更改$primary的值就可以更改主主题颜色。