Something we've overlooked is how to properly nest light mode inside a parent dark mode. I ran into this while updating the examples to better support color modes. Basically, if you have the root set to dark mode and you want something like our carousel to appear in light mode, doing the following won't work:
<html data-bs-theme="dark">
<div class="carousel" data-bs-theme="light">...</div>
</html>This is because we have no selector for [data-bs-theme="dark"] .carousel { ... } in our codebase. We only have .carousel { ... }. As such, this PR suggests a potential solution we could use across the carousel component and other components: use a :not() selector in the selector.
@if $enable-dark-mode {
@include color-mode(dark) {
.carousel:not([data-bs-theme="light"]) {
@include carousel-dark();
}
}
}The same changes might need to be applied to accordions, dropdowns, close button, navbars, form checks, and form selects (all places we call the color mode mixin right now).
Thoughts?