bootstrap
bootstrap copied to clipboard
btn-close: dark mode data attribute only works when on parent, not when on button directly
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] I have read the contributing guidelines
Describe the issue
According to the documentation,
Add data-bs-theme="dark" to the .btn-close, or to its parent element, to invert the close button.
It however doesn't work, when the data-bs-theme="dark"
is placed on the btn-close itself, it only works, when it's placed on a parent. This is due to the SASS:
@if $enable-dark-mode {
@include color-mode(dark) {
.btn-close {
@include btn-close-white();
}
}
}
Reduced test cases
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5.3.0
@tagliala seems to have provided a patch for this to match the documented behavior although I don't see any pull requests for it here. Bummer its gotten pushed twice now for such a seemingly simple patch.
The changes proposed in #38917 will fix this issue