Изменение css по нажатию кнопки

Question

Помогите, пожалуйста, сделать так, чтобы по нажатию на кнопку первый раз темная тема включалась, а на второй клик выключалась.

let
  btnset = document.querySelector(".btn-set"),
  html = document.querySelector("html"),
  timer = document.querySelector(".input7"),
  input5 = document.querySelector(".input5");

btnset.addEventListener("click", function() {
  html.style.backgroundColor = "#494949"
  timer.style.backgroundColor = "#494949"
  timer.style.Color = "#494949"
  input5.style.backgroundColor = "#494949"
  input5.style.Color = "#fff"
})

<div class="html">
  <input class="input" placeholder="Введите команду" type="text">
  <input class="input2 inputw" placeholder="первое число" type="number">
  <input class="input3" placeholder="действие(+,-,*,/,%)" type="text">
  <input class="input4" placeholder="второе число" type="number">
  <button class="btn">Enter</button>
  <div class="btnbtnbtn">
    <div class="flex">
      <div class="flex1">
        <button class="btn2 btn-2"><span>/circlearea</span></button>
        <button class="btn3 btn-3"><span>/cylindervolume</span></button>
        <button class="btn4 btn-4"><span>/numberroot</span></button>
      </div>
      <div class="flex2">
        <input class="input5" type="number" placeholder="">
        <button class="btn5 btn-5 "><span>/kattet</span></button>
        <button class="help btn-help"><span>HELP</span></button>
      </div>
    </div>
  </div>
  <input type="number" class="input6">
  <input type="text" class="input7" readonly>
  <button class="btn6 btn-6">Запустить Таймер</button>
  <button class="btn-set">gfggfgg</button>
  <input type="text" class="input8" placeholder="Результат">
  <input class="xcy" placeholder="Ответ" type="text">
</div>
<script src="2.0.js"></script>

Answer 1

const btnset = document.querySelector(".btn-set");

btnset.addEventListener("click", function() {
  document.body.classList.toggle('theme-background--dark');
})

.theme-background--dark, .theme-background--dark .input7, .theme-background--dark .input5 {
  background-color: #494949;
}

.theme-background--dark .input7, .theme-background--dark .input5{
  color: #494949,
}

<div class="html">
  <input class="input" placeholder="Введите команду" type="text">
  <input class="input2 inputw" placeholder="первое число" type="number">
  <input class="input3" placeholder="действие(+,-,*,/,%)" type="text">
  <input class="input4" placeholder="второе число" type="number">
  <button class="btn">Enter</button>
  <div class="btnbtnbtn">
    <div class="flex">
      <div class="flex1">
        <button class="btn2 btn-2"><span>/circlearea</span></button>
        <button class="btn3 btn-3"><span>/cylindervolume</span></button>
        <button class="btn4 btn-4"><span>/numberroot</span></button>
      </div>
      <div class="flex2">
        <input class="input5" type="number" placeholder="">
        <button class="btn5 btn-5 "><span>/kattet</span></button>
        <button class="help btn-help"><span>HELP</span></button>
      </div>
    </div>
  </div>
  <input type="number" class="input6">
  <input type="text" class="input7" readonly>
  <button class="btn6 btn-6">Запустить Таймер</button>
  <button class="btn-set">gfggfgg</button>
  <input type="text" class="input8" placeholder="Результат">
  <input class="xcy" placeholder="Ответ" type="text">
</div>
<script src="2.0.js"></script>

БЛОГ НА HUSL

Изменение css по нажатию кнопки

Ответы (1 шт):