v5.3.0 Table variants (colors) not changing from light mode to dark mode when system settings change

[emmahsax]

I am using bootstrap in a Jekyll-built website with bootstrap's tables.

On Bootstrap v5.3.0-alpha3, I can use the default variant in order to have the tables change their background color automatically when the computer/mobile system's light/dark mode changes.

But starting in v5.3.0, the default variant no longer works like that (on my website at least). Instead, setting no variant means that the table just looks like light mode all the time, even when switching the computer system to dark mode.

I bypassed the issue by setting this in my code (allows me to fully customize the background colors of all tables based on prefers-color-scheme: dark):

html {
  --table: #606c71;
  --table-background: #eff0f1;
}

@media (prefers-color-scheme: dark) {
  html {
    --table: #cfd4d6;
    --table-background: #525252;
  }
}

.table {
  --bs-table-bg: var(--table-background);
  --bs-table-color: var(--table);
}

But I'd prefer if it just works when the system settings change automatically.

Here is a video of the CSS working on v5.3.0-alpha3: https://github.com/twbs/bootstrap/assets/7562793/30d30c1c-1965-44e1-ab4a-75896b5f6426

Here is a video of the CSS not working on v5.3.0: https://github.com/twbs/bootstrap/assets/7562793/673e4550-0dd3-4418-86b1-f53febd5687d

[julien-deramond]

I don't have the whole source code so I will make some assumptions in my answer.

The table background color in v5.3.0-alpha3 was transparent and I can see in your video that you have overridden the color based on --body-text which doesn't come from Bootstrap. So all the colors that change are not from Bootstrap actually.
In v5.3.0, there's a solid background color for the tables so your actual system (not really based on Bootstrap for the bg and text colors) will only change what's outside of the table.

In v5.3.0 and v5.3.0-alpha3 the color modes rely on data-bs-theme. If you want only to react to the system's light and dark modes, you need to build Bootstrap with Sass and set $color-mode-type: media-query; (see https://getbootstrap.com/docs/5.3/customize/color-modes/#building-with-sass).

Without recompiling Bootstrap, there will be another possibility in JS to simulate our "auto" mode in the documentation based on https://github.com/twbs/bootstrap/blob/main/site/static/docs/5.3/assets/js/color-modes.js but I wouldn't recommend this approach.

[emmahsax]

Thanks @julien-deramond. I think you pretty much answered the question as to what changed... in v5.3.0-alpha3 the background was transparent, and in v5.3.0 it changed to be a solid color.

I couldn't figure out where to put the $color-mode-type: media-query; line (I do use sass, but I pulled in the entire compiled bootstrap.min.css file, so I don't compile bootstrap with sass like that), but I think I can just change the table's color to be transparent again and that would do the trick.

Thanks for the explanation... I'm afraid CSS/frontend/html/sass isn't my strong suit.

[Glideh]

Is there a reason why we apply the color scheme rules of the "media-query" (browser/os prefs) on top of the "data attribute" ?

@media (prefers-color-scheme: dark) :root {
//...
:root, [data-bs-theme=dark] {
//...

This seems counter intuitive for me, because we can't use both in an effective way.
If these rules are reversed we could actually get rid of this $color-mode-type variable.
It would take the default theme from the browser/os then potentially override it with the data attributes.

:root, [data-bs-theme=dark] {
//...
@media (prefers-color-scheme: dark) :root {
//...

Wouldn't it seem easier ?
Am I missing something here ?