Change color of Bootstrap theme-colors in dark mode?

Question

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..

Carol Skelly · Accepted Answer · 2023-02-09T15:24:23.520

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?

score 0 · Answer 2 · edited Feb 18 '23 at 09:07

Now you can use color mode in new v5.3 with the following
in the <html len="en" data-bs-theme="light">
If you want more colors, make the swith button to a dropdwon button
Bootstrap v5.3 also support auto mode, check on their site with javascript.

$("input[id='lightSwitch']").on("change", function() {
  if ($("html").attr("data-bs-theme") == 'light') {
    $("html").attr("data-bs-theme", "dark");
  } else if ($("html").attr("data-bs-theme") == "dark") {
    $("html").attr("data-bs-theme", "light");
  }
});

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en" data-bs-theme="light">
<body>
  <div class="form-check form-switch ms-auto mt-2 me-2">
    <label class="form-check-label ms-3" for="lightSwitch">
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-brightness-high" viewBox="0 0 16 16">
        <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
      </svg>
    </label>
    <input class="form-check-input" type="checkbox" id="lightSwitch" />
  </div>
</body>
</html>

This doesn't answer my question. I'm not asking how to implement switching of color mode... Please read my question carefully. — Elembivios, Feb 13 '23 at 09:03

Change color of Bootstrap theme-colors in dark mode?

2 Answers2