如何覆盖bootstrap 5.3中的默认变量light-theme变量？

9nvpjoqh 于 2023-06-04 发布在 Bootstrap

关注(0)|答案(1)|浏览(175)

我正在尝试使用bootstrap 5.3中提供的新theme功能。我使用SASS编译器在本地编译了bootstrap。当当前使用的主题是light时，我想将默认背景色更改为#EDF4FA，并将--bs-card-bg设置为白色。
我尝试了以下方法

@include color-mode(light) {
    --bs-body-color: #EDF4FA;
    --bs-body-color-rgb: #{to-rgb(#EDF4FA)};
    --bs-card-bg: var(--bs-white);
}

但这似乎不起作用。--bs-body-color按预期设置。但是，--bs-card-bg不会改变。
下面是浏览器的CSS规则。正如你在底部看到的，--bs-card-bg: var(--bs-white)有一条线穿过它。

1条答案

事实证明，有几种方法可以做到这一点。

@include color-mode(light) {
    .card {
        --bs-card-bg: var(--bs-white);
    }
}

@include color-mode(light) {
    .card {
        background-color: var(--bs-white);
    }
}