我正在网页上编写一个在深色模式和浅色模式之间切换的功能，但是 body 标签的内容不会改变。页面顶部的导航栏改变样式，但正文没有
我尝试缩小CSS中轻模式类中的body标签范围，但它根本没有改变。
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");
}
我错过了什么吗？
我更改了 Javascript 以使用
htmlfunction darkMode(){
var element= document.querySelector('html');
element.classList.toggle("lightMode");
}body{
font-family: "Open Sans", Arial, sans-serif;
color: #333;
background-color: red;
}
.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;
}
body{
background-color: blue;
}
}<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>
</body>
</html>