Apologies for the imprecise title, but I'm not sure exactly what words to use to ask my question.
I'm trying to add a toggle on a React app to allow multiple themes (dark mode, light mode). After a bit of googling it looks like the best way will be to have two complementary themes loaded from the CSS. For example, we could have:
<div class="a-nice-class">
...some nice sunny content
</div>
<div class="night a-nice-class">
...some lovely night-time content
</div>
with a css for night mode that looked something like
.night h1, .night h2, .night div, .night textarea{
background-color: black;
color: white;
transition: background-color 0.3s, color 0.3s;
}
I would like to use Bootswatch CSS themes for my night and day modes. The Bootswatch themes can either be imported using import "bootswatch/dist/flatly/bootstrap.min.css";, or by downloading and including the CSS.
I would like to download the CSS for each theme and then rename classes in the Darkly css to make any divs tagged with "night" read their formatting from Darkly, rather than the Flatly theme.
Without going into the CSS file and adding .night to all of the class names, is there a way of specifying that everything in the Darkly.css file should also be a .night class?
Alternatively if there's an easy way to toggle night mode for externally grabbed bootswatch themes, shout: I haven't found a satisfactory one.
Thank you
