When the clock strikes certain evening hours on my website, the Bootstrap card's default light style no longer fits the dark theme. I've attempted to switch the card to a dark style by tying in some JavaScript code, but it's not quite doing the trick. The code snippet below demonstrates my solution so far.
let hour = new Date().getHours();
if(hour < 14 || hour > 20) {
darkMode();
}
function darkMode() {
var element_body = document.body;
element_body.classList.toggle("dark-mode-body");
var links = document.querySelector("a");
/* First anchor tag in the document */
links.classList.toggle("dark-mode-anchor");
var cards = document.getElementsByClassName("card bg-light");
for(var i = 0; i < cards.length; i++) {
cards[i].classList.toggle("card bg-dark");
}
}<div class="card bg-light">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="btn btn-light mr-0" role="button">Card link</a>
</div>
</div>