问题

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

我尝试了以下方式：

```scss
@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) 被划掉了。

请注意，我已经为您提供了翻译的文本，不包括代码部分。

<details>
<summary>英文:</summary>

I am trying to use the new `theme` feature available in bootstrap 5.3. I compiled bootstrap locally using the SASS compiler. I want to change the default background-color to `#EDF4FA` when the current theme used is `light` and set the `--bs-card-bg` to white.

I tried the following

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

But that does not seems to work. The `--bs-body-color` is set as expected. However, the `--bs-card-bg` does not change.

Here is the css rules from the browser. As you can see at the bottom `--bs-card-bg: var(--bs-white)` has a line through it.

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/nL372.png

</details>


# 答案1
**得分**: 0

#### 使用变量

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

使用变量

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

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

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