Search code examples
sasscolorsbootstrap-5darkmode

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


    Related: How to properly introduce a light/dark mode in Bootstrap?