[SOLVED] Change color of Bootstrap theme-colors in dark mode?

Change color of Bootstrap theme-colors in dark mode?

How can I change theme-colors (primary, secondary, etc.) in Bootstrap 5.X with sass only for dark mode? I get how I can change the primary color in both light and dark theme mode:

custom.scss

... snip ...
@import "../bootstrap/scss/functions";

$primary: #0e548c;

@import "../bootstrap/scss/variables";
... snip ...

But how can I change $primary color to be a little brighter in dark mode? For example: #0062cc

In current documentation (variables_dark.scss) I've found only the variables:

primary-text-dark,
primary-bg-subtle-dark,
...

I get how to change these variable values, but have no idea how to assign non-existing one (there's no primary-dark).

Adding:

@include color-mode(dark) {    
    $primary: #0062cc;
}

right after @import "../bootstrap/scss/root"; doesn't work either..

Solution

Dark mode is new in 5.3 alpha, and there are some issues with color support in dark mode. Currently changing theme colors in dark mode isn't supported.

https://github.com/twbs/bootstrap/issues/37976

As of now, the only way would be to set the individual CSS variables:

[data-bs-theme="dark"] {
  --bs-primary: #{$primary};
  --bs-primary-bg-subtle: #{$primary};
  --bs-primary-bg-subtle-dark: #{$primary};
  
  .btn-primary {
    --bs-btn-bg: #{$primary};
  }
}

https://codeply.com/p/BmyKLq8RTV