Bulma - 如何使用一个助手更改导航栏上所有链接的文本颜色？

Question

在 Bulma 中，如何一次更改多个项目的文本颜色？

也就是说，由于视力低下，我想将导航栏上的所有文本更改为黑色而不是较暗的灰色。

我是 Bulma 的新手，到目前为止我可以使用“has-text-black”助手，但必须将它们添加到每个链接中。

<nav id="navbarMain" class="navbar is-spaced" role="navigation" aria-label="main navigation">
    <div class="container">
        <div class="navbar-brand">
                <a class="navbar-item is-size-4 has-text-black" href="/">
                    <span class="icon is-large is-circle">
                        <i class="fas fa-cube has-text-primary fa-lg"></i>
                    </span>&nbsp;
                    My Site
                </a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
  <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div id="navbarMenu" class="navbar-menu">
            <div class="navbar-start">
                 <a class="navbar-item has-text-black" href="/about/">
                            <span class="icon has-text-link">
                                <i class="fas fa-info-circle"></i>
                            </span>&nbsp;
                        About
                    </a>

....

我希望将助手添加到类中一个包含导航栏链接项的 div 或容器中的一个位置，但这似乎不起作用。

我查看了自定义文档并尝试设置 $text: black;但这也不起作用。

有没有办法将某个部分或容器中的所有灰色文本颜色设置为黑色？

并且，如何设置/自定义全局或站点范围的文本颜色从灰色到黑色（或其他颜色？

（不然有没有所有颜色变量的详细说明以及如何按正确的顺序修改它们？）

提前致谢。 拉尔夫

Answer 1

关键是要注意文档。 Bulma 为其所有组件或元素提供 SASS 变量，以便您可以进行自定义。目标是尽可能少地编写自定义 CSS。这是链接

https://bulma.io/documentation/components/navbar/#colors

在项目的全局 SCSS 文件中，您可以添加这些 SCSS 变量并添加您选择的颜色：

$navbar-burger-color: #f1f1f1;
$navbar-background-color: #273643;
$navbar-item-hover-background-color: #3f4f62;
$navbar-item-hover-color: $white;
$navbar-item-color: #f1f1f1;
$navbar-dropdown-arrow: #f1f1f1;
$navbar-tab-active-color: #f1f1f1;
$navbar-tab-active-background-color: #273643;
$navbar-dropdown-background-color: $primary;

如果您对颜色组合感到困惑，请访问--> https://coolors.co

干杯！！ :)

Answer 2

一个简单的方法是在导入 bulma css 后通过自定义 css 文件修改它。对于较小的项目，这可能是一个可接受的解决方案：

.navbar-item {
  color: red;
}

默认情况下，这会将所有导航栏项目更改为红色。请注意在测试之前可能会清空缓存