我今天开始编码，我试图制作一个简单的静态黑暗模式按钮，但按钮的背景不会改变其 colored颜色 ，我已经在CSS上第36行修复了一件事，它是--bg: var(--green);，但当我点击(https://i.stack.imgur.com/CYUB4.png)时屏幕会是黑色的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>site</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="light-theme">
<h1>Task List</h1>
<p id="msg">Current tasks:</p>
<ul>
<li class="list">Add visual styles</li>
<li class="list">Add light and dark themes</li>
<li> Enable switching the theme</li>
</ul>
<div>
<button class="btn">Dark</button>
</div>
<script src="app.js" defer></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
</body>
</html>
body {
font-family: monospace;
}
ul {
font-family: Arial, Helvetica, sans-serif;
}
li {
list-style: circle;
}
.list {
list-style: square;
}
.light-theme {
color: black;
background: #00FF00;
}
:root {
--green: #00FF00;
--white: #ffffff;
--black: #000000;
}
.light-theme {
--bg: var(--green);
--fontColor: var(--black);
--btng: var(--black)
--btnFontColor: var(--white)
}
.dark-theme {
background: var(--black);
--fontColor: var(--green);
--btnBg: var(--white)
--btnFontColor: var(--black)
}
* {
color: var(--fontColor);
font-family: Arial, Helvetica, sans-serif;
}
body {
background: var(--bg);
}
.btn {
color: var(--btnFontColor);
background-color: var(--btnBg);
}
.btn {
position: absolute;
top: 20px;
left: 250px;
height: 50px;
width: 50px;
border-radius: 50%;
border: none;
color: var(--btnFontColor);
background-color: var(--btnBg);
}
.btn:focus { outline: none; }
'use scrict'
const switcher = document.querySelector('.btn');
switcher.addEventListener('click', function() {
document.body.classList.toggle('dark-theme')
var className = document.body.className;
if(className == "light-theme") {
this.textContent = "Dark";
}
else {
this.textContent = "Light"
}
console.log('current class name: ' + className);
});
enter image description here
它应该是什么样子:(https://i.stack.imgur.com/SGUMf.png)
