我正试图获得一些按钮功能的帮助。到目前为止，我有这样的图像和背景颜色改变时，点击按钮被点击。我想做的是，当你点击它的时候，整个网站会变成"深色模式"用较深的颜色和较亮的文字。我挣扎的地方是与图像填充，和标题。下面是到目前为止的代码:
<!doctype html>
<html>
<head> <style> .title {font-size: 50px; text-align: center; background-color: #C1C1C1; border-radius: 20px; font-family:arial; color: #00486B;}
.img {background: coral; width: 500px; padding: 30px; margin-left: auto; margin-right: auto; display: block;}
.body {padding: 25px; background-color: white; color: black; font-size: 25px;}
.dark-mode {background-color: black; color: white;}
.main {text-align: center; font-size; 50px; border-radius: 20px; font-family: arial; color: #00486B;}
</style> <script>
function myFunction(){
var element = document.body;
element.classList.toggle("dark-mode")}
function changeImage(){
var image = document.getElementById('myImage');
if (image.src.match("skeletons.jpg")) {image.src = "joseph.jpg";}
else {image.src= "skeletons.jpg";}} </script>
<title>Java</title>
</head> <body class="main">
<h1 class="title">Toggle Display</h1>
<img src="skeletons.jpg" class="img" id="myImage">
<br>
<button onclick="myFunction(); changeImage();" value="Change">CLICK</button>
</body>
</html> ```
如果你想在暗模式下为图片和标题设置不同的样式，你可以这样做:
.dark-mode .img {
}
.dark-mode .title {
}
JSFiddle: https://jsfiddle.net/oLtvjwhe/1/