This only applies to Bootstrap 5.3 and later using dark mode.
I've been exploring dark mode a little more lately for some personal projects using Bootstrap 5. One thing that I find quite annoying is using Bootstrap 5's dark outline button in dark mode. This looks just fine in light mode, but when you switch to dark mode it becomes invisible. How do you get around that?
It's actually quite easy. I call these "Contrast Buttons". These use the default body and background color to present the button with better contrast: dark in light mode and light in dark mode.
All you have to do is plug in this CSS:
.btn-outline-contrast,
[data-bs-theme=light] .btn-outline-contrast {
--bs-btn-color: #212529;
--bs-btn-border-color: #212529;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #212529;
--bs-btn-hover-border-color: #212529;
--bs-btn-focus-shadow-rgb: 33, 37, 41;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #212529;
--bs-btn-active-border-color: #212529;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #212529;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #212529;
--bs-gradient: none;
}
[data-bs-theme=dark] .btn-outline-contrast {
--bs-btn-color: #dee2e6;
--bs-btn-border-color: #dee2e6;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #dee2e6;
--bs-btn-hover-border-color: #dee2e6;
--bs-btn-focus-shadow-rgb: 222, 226, 230;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #dee2e6;
--bs-btn-active-border-color: #dee2e6;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #dee2e6;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #dee2e6;
--bs-gradient: none;
}
This follows pretty closely with how Bootstrap handles .btn.btn-outline-dark but changes some colors specifically for dark mode.
Then just add <button class="btn btn-outline-contrast">Button</button> to your HTML, and you should have the appropriate contrast button depending on the selected mode.
This is what you should see:
I Want More
Having the contrast button work for outline buttons is great, but I would also like a regular contrast button. This is all you need in both cases:
.btn-contrast,
[data-bs-theme=light] .btn-contrast {
--bs-btn-color: #fff;
--bs-btn-bg: #212529;
--bs-btn-border-color: #212529;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #1c1f23;
--bs-btn-hover-border-color: #1a1e21;
--bs-btn-focus-shadow-rgb: 66, 70, 73;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #1a1e21;
--bs-btn-active-border-color: #191c1f;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #212529;
--bs-btn-disabled-border-color: #212529;
}
.btn-outline-contrast,
[data-bs-theme=light] .btn-outline-contrast {
--bs-btn-color: #212529;
--bs-btn-border-color: #212529;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #212529;
--bs-btn-hover-border-color: #212529;
--bs-btn-focus-shadow-rgb: 33, 37, 41;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #212529;
--bs-btn-active-border-color: #212529;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #212529;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #212529;
--bs-gradient: none;
}
[data-bs-theme=dark] .btn-contrast {
--bs-btn-color: #000;
--bs-btn-bg: #dee2e6;
--bs-btn-border-color: #dee2e6;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #e3e6ea;
--bs-btn-hover-border-color: #e1e5e9;
--bs-btn-focus-shadow-rgb: 189, 192, 196;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #e5e8eb;
--bs-btn-active-border-color: #e1e5e9;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #dee2e6;
--bs-btn-disabled-border-color: #dee2e6;
}
[data-bs-theme=dark] .btn-outline-contrast {
--bs-btn-color: #dee2e6;
--bs-btn-border-color: #dee2e6;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #dee2e6;
--bs-btn-hover-border-color: #dee2e6;
--bs-btn-focus-shadow-rgb: 222, 226, 230;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #dee2e6;
--bs-btn-active-border-color: #dee2e6;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #dee2e6;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #dee2e6;
--bs-gradient: none;
}
Here is what that looks like in both light and dark mode.
I hope this helps anyone looking for a good solution to this missing feature.
Top comments (0)