Dark Bootswatch presets with Bootstrap 5.3

[gadenbuie]

Now that the latest version of Bootstrap 5.3 supports dark mode, there's a small surprising change to the dark Bootswatch themes.

It appears that dark Bootswatch themes now look best when data-bs-theme="dark" attribute is added to the document body. My personal preference would be for these themes to look as expected in the absence of the data-bs-theme attribute.

This might require updates in Bootswatch or for us to patch the Bootswatch themes.

[cpsievert]

Just a note that this problem is not isolated to darkly

[gadenbuie]

The concrete action we need to consider in this issue is that the Bootswatch dark mode themes might need the data-bs-theme="dark" to look best.

[gadenbuie]

We might want to expose this as a top-level argument in bs_theme(), e.g. color_mode. The primary purpose would be to have bslib's page-level functions add the data-bs-theme attribute when color_mode is provided. This would benefit any theme author – maybe they've designed a theme and want to start in the dark variant, or maybe they want to pick the dark variant of an existing theme.

For Bootswatch, one option would be to inspect the Sass bundle to find the value of color-mode on :root (I'm not sure how feasible that is). If that's not possible, we could also maintain an internal mapping and set color_mode appropriately for the dark themes.

[gadenbuie]

From what I can tell so far, there isn't a guiding principle at play here. In general, it seems that Bootswatch is not making assumptions about the data-bs-theme attribute -- i.e. dark themes are dark by default -- but the themes don't completely account for Bootswatch's default light styles. So there can be odd interactions.

No Attribute	Dark	Light

Note that in the above, the no attribute and light versions have the theme's desired background color but some of the other styles aren't great for a dark theme. Flipping on data-bs-theme="dark" generally looks better but loses some of the basic theme colors, like the Cyborg background color.

Should we consider trying to improve the themes upstream?

[cpsievert]

Should we consider trying to improve the themes upstream?

That feels like an ideal way to approach this, given it's not a ton of work to fix the most egregious contrast issues. There's been a decent amount of recent activity in this direction (of making dark themes work better in the new color mode world), so I imagine Thomas would be quite receptive to issues/PRs. Given we go in that direction, it probably also makes sense that we update to 5.3.2 in this release.

Also, FWIW, based on recent commits (e.g., 3038872b8389763b64857bac00e102a71251a331), it kind of seems that, at least in theory, dark themes should behave mostly the same regardless of the data-bs-theme (i.e., dark themes won't support a "light mode"), but it'd be good to get some clarity on that from Thomas

[github-actions]

This issue has been automatically locked. If you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.
🙋 Need help? Connect with us on Discord or Posit Community.