Блог

Я нашел много информации об этом в Интернете, но, похоже, я не могу заставить что-либо из этого работать для этого.

Я пытаюсь создать кнопку, которая переключает светлую / темную тему при нажатии, изменяя только цвет основного фона и стиль трех модальных кнопок на странице. Мой код работает для оформления кнопок, но не для основного фона. Я совсем новичок, поэтому думаю, что, вероятно, я просто что-то упускаю синтаксически. ого!

это должно быть на родном javascript, а не на jQuery. Любые подсказки были бы очень признательны. Заранее большое спасибо!

CSS:

 .light body {
    background: #D8DDDE;
}

.light .myBtn {

    color:rgb(58, 57, 57);
    background-color: #D8DDDE;
    border-top: solid 4px rgb(58, 57, 57);
    border-left: none;
    border-right: none;
    border-bottom: none; 
    transition: 0.6s;

}
  

Javascript

 var themeSwitch = document.querySelector("footer button");

document.querySelector("footer button").addEventListener("click", toggleText);
   function toggleText() {
      if (themeSwitch.textContent === "Turn the lights off") {
         themeSwitch.textContent = "Turn the lights on";
      } else {
         themeSwitch.textContent = "Turn the lights off";
      }
   }

themeSwitch.addEventListener('click', function(){
    document.querySelector("body").classList.toggle("light") //this is working for the button but not the body background
})
  

Этот код ошибочен

   .light body {
        background: #D8DDDE;
    }
  

пожалуйста, измените на

 body.light{
    background: #D8DDDE;
} 
  

 var themeSwitch = document.querySelector(".footer button");

themeSwitch.addEventListener("click", toggleText);
   function toggleText() {
      if (themeSwitch.textContent === "Turn the lights off") {
         themeSwitch.textContent = "Turn the lights on";
      } else {
         themeSwitch.textContent = "Turn the lights off";
      }
   }

themeSwitch.addEventListener('click', function(){
    document.querySelector("body").classList.toggle("light") //this is working for the button but not the body background
})  

 body.light {
    background: #D8DDDE;
}

.light .myBtn {

    color:rgb(58, 57, 57);
    background-color: #D8DDDE;
    border-top: solid 4px rgb(58, 57, 57);
    border-left: none;
    border-right: none;
    border-bottom: none; 
    transition: 0.6s;

}  

 <div class="footer">
<button>Turn the lights on</button>
</div>  

Попробуйте удалить body из класса css .light .