You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As of Bootstrap 5.3, we have lost the ".btn-close-white" class. In theory, this seems fine since the flip is now handled by the new "dark mode" implementation, however it can present and issue if the button is placed over an element of similar lightness.
Take for example, the following:
<divclass="toast" role="alert" aria-live="assertive" aria-atomic="true"><divclass="toast-header bg-warning"><imgsrc="..." class="rounded me-2" alt="..."><strongclass="me-auto">Warning!</strong><small>11 mins ago</small><buttontype="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><divclass="toast-body">
This is a warning message.
</div></div>
Under the light theme everything looks okay, however as soon as you flip to the dark theme the X switches to the lighter colour and becomes difficult to see:
I realize I could manually set the data-bs-theme on the button to force it to stay with the light theme, but that's more of a workaround. This is not necessarily true depending on how and when you call in your theme, I think? It worked in my code pen, but not on the site that I'm working on.
Disclaimer:
I am incredibly new to SASS, so:
I have no idea if this can be extended like many of the other classes can be.
It is entirely possible that the problem is between the chair and the keyboard here 😅
As you said, using <div class="toast-header bg-warning"> is the equivalent of what we had before as dark variants and was to be used with the .btn-close-white class.
Now, the equivalent would be <div class="toast-header bg-warning" data-bs-theme="light"> (if the rendering stays the same in light and dark mode with a solid "dark" bg color).
In these cases, some components have issues right now. I need to find time to finish it but #39295 should tackle a part of this problem.
As a temporary solution, you'll probably need to override the rendering yourself with some CSS custom code. Something like this https://codepen.io/julien-deramond/pen/LYvGqLX could help, even if there are probably more elegant solutions:
<divclass="container py-5 gap-3 d-flex flex-column w-100 h-100 bg-body" data-bs-theme="dark"><divclass="toast fade show text-body" role="alert" aria-live="assertive" aria-atomic="true"><divclass="toast-header text-dark bg-warning" data-bs-theme="light"><svgclass="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rectwidth="100%" height="100%" fill="#007aff"></rect></svg><strongclass="me-auto">Bootstrap</strong><small>11 mins ago</small><buttontype="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button></div><divclass="toast-body">
Hello, world! This is a toast message.
</div></div></div>
Thanks! I was able to work around it - it's a bit hacky, but I made a class that only applies to my dark theme:
// dark theme close button work-around (for light-coloured elements in dark mode)// Refer to: https://github.com/twbs/bootstrap/issues/39765.btn-close-dark {
@extend.btn-close;--bs-btn-close-white-filter: invert(0) !important;
}
Then on my elements where I need it, I just set class="btn-close btn-close-dark"
Is there a better way to do it? Probably... but it works so that's good enough for me lol
Prerequisites
Describe the issue
As of Bootstrap 5.3, we have lost the ".btn-close-white" class. In theory, this seems fine since the flip is now handled by the new "dark mode" implementation, however it can present and issue if the button is placed over an element of similar lightness.
Take for example, the following:
Under the light theme everything looks okay, however as soon as you flip to the dark theme the X switches to the lighter colour and becomes difficult to see:
I realize I could manually set the data-bs-theme on the button to force it to stay with the light theme, but that's more of a workaround.This is not necessarily true depending on how and when you call in your theme, I think? It worked in my code pen, but not on the site that I'm working on.Disclaimer:
I am incredibly new to SASS, so:
Reduced test cases
Codepen Demo
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?
5.3.2
The text was updated successfully, but these errors were encountered: