Я пытался добавить темный режим на веб-страницу практики, он работает, чтобы изменить цвет фона тела, но не работает с кнопками, код:
код не работает класс .icons CSS, он появляется в chrome, но не работает,
объяснение приветствуется.
Спасибо
document.querySelector(".slider-button").addEventListener("input", function(){
document.querySelector("#data-left").innerHTML = this.value;
})
document.querySelector(".slider-button").addEventListener("input", function(){
document.querySelector(".gb-left").innerHTML = 1000-this.value;
})
document.querySelector(".button-color-mode").addEventListener("click", function(){
document.body.classList.toggle("darkmode");
document.querySelector(".icons").classList.toggle("darkmode");
})
body {
position: fixed;
background-color: hsl(229, 57%, 11%);
background-image: url("images/bg-desktop.png");
background-position: center 400px;
background-repeat: no-repeat;
background-size: cover;
}
.button-color-mode{
background-color: black;
color: white;
outline: none;
border-radius: 15px;
}
.darkmode{
background-color: white;
}
.icons {
background-color: hsl(229, 57%, 11%);
border-style: none;
border-radius: 10px;
width: 50px;
height: 50px;
padding: 10px;
margin: 5px;
outline: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" href="images/favicon-32x32.png">
<link rel="stylesheet" href="styles.css">
<title>Fylo Data Storage</title>
</head>
<body>
<button class="icons" type="button"><img src="images/icon-document.svg" alt="" name="button"></button>
<button class="icons" type="button"><img src="images/icon-folder.svg" alt="" name="button"></button>
<button class="icons" type="button"><img src="images/icon-upload.svg" alt="" name="button"></button>
</html>