I am working on a simple website using bootstrap 4 and SCSS. I want to include a toggler that switches between dark and light modes on the webpage. However, I'm facing an issue with changing the background color of 6 Bootstrap cards, footer, and the text color of nav links. Can you assist me with this?
html:
function myFunction() {
let text = document.getElementById("nox-lumos");
if (text.innerHTML == 'Nox!') {
document.getElementById("nox-lumos").innerHTML = 'Lumos!';
} else if (text.innerHTML == 'Lumos!') {
document.getElementById("nox-lumos").innerHTML = 'Nox!';
}
let page = document.body;
page.classList.toggle("dark-mode");
}body {
font-family: 'Courier New', Courier, monospace;
}
.rowstyle {
background-color: #252525;
color: white;
border: 1px solid white;
}
.dark-mode {
background-color: #252525;
color: white;
}
...
...
(CSS code continues)
...