Potential for contrast issues with '.btn-close' class about bootstrap

[julien-deramond]

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%);
}

[abraxas86]

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