I am writing a function to switch between dark mode and light mode on my webpage, but the contents of the body tag won’t change. The navbar at the top of the page changes style, but the body doesn’t
I have tried narrowing down the body tag in my light mode class in css, yet it doesn’t change at all.
HTML:
<body>
<div class="topnav">
<div class="logo"></div>
<div class="navlinks">
<a href="index.html">Demo</a>
<a href="interactive.html">Interactive</a>
<button onclick="{darkMode()}" class="settingsButton">_ _ _</button>
</div>
</div>
<!-- graph -->
<div class="traffic">
<canvas id="chart1"></canvas>
<canvas id="graph2"></canvas>
</div>
CSS:
body{
background: #fafafa;
font-family: "Open Sans", Arial, sans-serif;
color: #333;
background-color: #202a51;
background-image: radial-gradient( #202a51, #111235);
transform-style: preserve-3d;
}
.topnav {
overflow: hidden;
display: flex;
height: 100px;
width: 100%;
z-index: 1000;
flex-direction: row;
justify-content: space-between;
background-color: white;
}
.lightMode{
.topnav{
background-color: #e5e1c4;
}
.topnav a{
color: #f45e33;
}
.settingsButton{
background-color: #e5e1c4;
color: #f45e33;
}
}
.lightMode body{
background-color: #A09682;
background-image: none;
}
JavaScript:
function darkMode(){
var element= document.body;
element.classList.toggle("lightMode");
}
Am I missing anything?