Table contextual classes (table-danger etc) do not adapt to dark mode

[Aileron79]

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

While alerts perfectly adapt to dark mode and change color accordingly, the contextual table classes (table-danger, table-success, ...) don't - looks kind of ugly, and very bright on a dark background. See screenshot and pen below.

Reduced test cases

https://codepen.io/Aileron79/pen/dywgNgY

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.1

[julien-deramond]

Thanks for opening this issue @Aileron79
Indeed this is not yet functional as mentioned in Tables > Variants

Heads up! Because of the more complicated CSS used to generate our table variants, they most likely won’t see color mode adaptive styling until v6.

[Aileron79]

Thanks, I did not see that - probably I checked an older version's documentation. Looking forward to v6 then.

[emmahsax]

I'm not sure if my issue is what the comment in the docs means, but when I upgraded to v5.3.2, my tables (using the default variant), no longer change color at all based on the computer's color mode changing. It's like the default variant (no table-X class at all), just is the light mode 100% of the time.

I did get as far into debugging to learn that the CSS works as I expect in v5.3.0-alpha3, but then it starts to break in v5.3.0, and continues to be broken up until v5.3.2. Maybe this helps?

The only way I found to workaround this is to put this in my CSS, and then change that color based on color mode:

.table {
  --bs-table-bg: #000000;
}

But the strange thing is their docs (found here) do have the default variant changing based on the system's mode changing. Even just copy-pasting their basic table example doesn't work:

• Literally copy-pasted this block into my page:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

• Dark mode:
  
• Light mode:
  

[julien-deramond]

@emmahsax I'm not sure to understand what the issue is here. I've created https://codepen.io/julien-deramond/pen/NWomqGo with the basic example you've copied and it works both with light and dark mode (by using data-bs-theme).

Since it doesn't seem to be related to the variants, could you please create first a Q&A Discussion with maybe a CodePen in it? It seems to be rather a usage issue than a bug.

[emmahsax]

I agree it is a usage issue, since it seems to work on your codepen and in their docs. But I will start a Q&A discussion.

EDIT: https://github.com/orgs/twbs/discussions/39482