Bold & (Light/Dark) switcher

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.

1 Like

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.

1 Like