How to override the default variable light-theme variable in bootstrap 5.3?

Question

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.

Answer 1

It turned out there is couple ways to do this.

Using variable

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

Using variable

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