btn-outline-* dark/light mode color issue

[sovetski]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

You can see the problem on the official documentation directly: https://getbootstrap.com/docs/5.3/components/buttons/#outline-buttons.

As you can see, if we are on the light mode, btn-outline-light is invisible

The problem is same for the dark mode and btn-outline-dark

Reduced test cases

https://getbootstrap.com/docs/5.3/components/buttons/#outline-buttons

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.2

[julien-deramond]

Thanks for reporting this issue @sovetski
It can seem weird in the documentation, but this is by design since you could use this light-outlined button in light mode on a darker background (with a .bg-dark for instance).

[sovetski]

Thanks for reporting this issue @sovetski It can seem weird in the documentation, but this is by design since you could use this light-outlined button in light mode on a darker background (with a .bg-dark for instance).

Thank you for your answer, but the problem is not only on the documentation. I implemented > data-bs-theme="dark" < on my "body" tag and with javascript I added a theme switcher. When I switch from dark more to light mode, my btn-outline-light buttons are not showing. How to resolve in this case?

[julien-deramond]

Yes, that's because of a limitation linked to the theme colors. Bootstrap considers that the colors of the theme are the same in light and dark mode (which I'd like to change for obvious reasons), and the buttons are created basically with a loop over these theme colors. So all buttons will have the same color in light and dark mode right now.

In your case, that is totally acceptable, right now, there's no solution within the framework since the buttons are stuck with the same colors in light/dark mode.

While waiting for something more customizable for your use case (we're still working on the color modes to improve it), I'd recommend something like this:

.btn-outline-tertiary {
  --bs-btn-color: var(--bs-tertiary-color);
  --bs-btn-border-color: var(--bs-tertiary-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-tertiary-color);
  --bs-btn-hover-border-color: var(--bs-tertiary-color);
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-tertiary-color);
  --bs-btn-active-border-color: var(--bs-tertiary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-tertiary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-tertiary-color);
  --bs-gradient: none;
}

It needs to be improved obviously but the idea would be to rely on var(--bs-tertiary-color) (or another one that you can create on your own) which changes colors between light and dark mode.

FYI this is something I'm gonna work on for our Bootstrap fork in our ongoing dark mode branch where we will also need something to switch the color of buttons (e.g. darker success color in light mode and lighter in dark mode).