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

[abraxas86]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

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:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-warning">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Warning!</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="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:

1. I have no idea if this can be extended like many of the other classes can be.
2. It is entirely possible that the problem is between the chair and the keyboard here 😅

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

[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