Comments (2)
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:
<div class="container py-5 gap-3 d-flex flex-column w-100 h-100 bg-body" data-bs-theme="dark">
<div class="toast fade show text-body" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header text-dark bg-warning" data-bs-theme="light">
<svg class="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">
<rect width="100%" height="100%" fill="#007aff"></rect>
</svg>
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
[data-bs-theme="light"].toast-header .btn-close {
filter: invert(0) grayscale(100%) brightness(200%);
}
from bootstrap.
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
from bootstrap.
Related Issues (20)
- Carousel returns incorrect (reversed) directions HOT 3
- Loading of an image is failed under status heading in README.md HOT 1
- Support tables in cards (Gist provided)
- change-version.mjs should also change content aliases links HOT 2
- Quick click issue when during offcanvas opening
- Bootstrap SCSS on NPM does not generate bg-dark classes HOT 1
- Add a (missing) breakpoint larger than xxl HOT 3
- System Default Select Box Design HOT 1
- 5.3.3 introduces breaking style bug in modal-header compared to 5.3.2 HOT 7
- React Bootstrap doesn't let me set background color HOT 2
- [Feature Request] Outlined badges
- Tooltip misaligned Y HOT 2
- Offcanvas Backdrop Disappears On Wire:Click HOT 1
- looks like your example code don't work
- Switch Form Layout Depending on Screen Size
- Support for input range ticks HOT 1
- Range input slider thumb has default border radius from browsers
- border-primary shows wrong color (lighter color) HOT 2
- Popover event.preventDefault() for show.bs.popover: disables popover
- Completing a tab cycle inside a bootstrap modal will cause the page to scroll
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap.