I'm trying to get some help with some button functions. So far I have it so that the image and background color change when the click button is clicked. I'm trying to make it so that when you click it, the whole website switches to a "dark mode" with darker colors and brighter text. Where I'm struggling is with the image padding, and the title. Here's the code so far.
<!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> ```
If you want different styles for image and title when dark-mode is on, you can do it like this:
.dark-mode .img {
}
.dark-mode .title {
}
JSFiddle: https://jsfiddle.net/oLtvjwhe/1/