如何为 Bulma 添加自定义颜色？答案

【问题标题】：How to add custom colors to Bulma?如何为 Bulma 添加自定义颜色？
【发布时间】：2021-09-25 19:06:55
【问题描述】：

我找到了这段代码：

$custom-colors: null !default

$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default

如何扩展与每种颜色相关的颜色和类别列表？很明显，我需要在包含 Bulma 之前定义一个变量 $custom-colors，但不清楚 $custom-colors 的格式应该是什么？我没有找到一个例子或很好的描述。有什么帮助吗？

【问题讨论】：

标签： sass bulma

【解决方案1】：

我发现了这个，我对其进行了测试并且运行良好。您必须将其添加到您自定义的 sass 主文件中。

https://github.com/jgthms/bulma/issues/2244

https://bulma.io/documentation/customize/with-node-sass/

$orange: #ff8606;
$orange-invert: findColorInvert($orange);
$custom-colors: ("orange": ($orange, $orange-invert));

在此之后，您可以使用新颜色，例如：

<button class="button is-orange">Orange</button>

【讨论】：