With the release of the exactly identical Bold & Dark to the previous Bold & Bright, I wonder what would be the best solution in BSS to have a button switcher on top nav/page footer that could link and alternate between the two themes.
At the moment the Bootstrap framework doesn’t support dark mode, but it’s been said that it is coming in their next releases.
As for our Bold & Bright/Dark templates, a workaround like this is possible:
<link rel="stylesheet" href="assets/bootstrap/css/dark.min.css" media="(prefers-color-scheme: dark)"> <link rel="stylesheet" href="assets/bootstrap/css/light.min.css" media="(prefers-color-scheme: light)">
Where dark.min.css is the Bold & Dark stylesheet and light.min.css is the Bold & Bright one. However this doesn’t work very well because the navbar in the dark template requires the navbar-dark class to invert the text color. The same is true for other components like cards.
Once official dark mode support lands in Bootstrap, these issues will be resolved.