Как отменить изменения в CSS, сделанные Javascript

Question

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

<button class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

После того, как пользователь щелкнет, он активирует эту функцию в javascript.

function dark_mode() {
    document.body.style.background = "#2C2F33";}

Thisбудет только менять фон.Мне интересно, если пользователь нажмет кнопку второй раз, он отменит изменения, внесенные функцией.(т.е. включение / выключение) Спасибо за время и помощь заранее!

Answer 1

Вы можете использовать data теги для отслеживания текущей темы:

<button class="btn btn-primary" onclick="dark_mode(this);" data-dark-theme="on" >Dark Mode ON</button>

JS:

function dark_mode(ctrl) {
var darkTheme = ctrl.getAttribute("data-dark-theme"); 
  if(darkTheme== "on"){
    ctrl.setAttribute("data-dark-theme", "off"); 
    document.body.style.background = "#2C2F33";
    ctrl.innerHTML  = "Dark Mode OFF";
  }
  else {
    ctrl.setAttribute("data-dark-theme", "on"); 
    document.body.style.background = "#FFFFFF";
    ctrl.innerHTML  = "Dark Mode ON";
  }
}

Рабочая демонстрация

Answer 2

Если пользователь нажимает снова, функция просто вызывается снова.Итак, после первого щелчка больше нет изменений.

Лучшим способом было бы назначить стили темного режима классу, скажем «btn - dark-mode», а затем использовать js для переключения этого класса:

function dark_mode() {
document.querySelector('#dark-mode-toggle').classList.toggle('dark-mode'); // ie9+ only
}

.btn--dark-mode {
  background-color: #2C2F33;
}

<button id="dark-mode-toggle" class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

Это будет применять класс или снимать его в зависимости от того, существует ли он уже.

Answer 3

Вы можете сделать это, переключив класс CSS, это более гибкое решение

function dark_mode() {
  document.body.classList.toggle('dark-mode')
}

.dark-mode {
  background: #2C2F33
 }

<button class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

Answer 4

Просто проверьте и измените стиль, используя троичный оператор:

function dark_mode() {
    document.body.style.background = document.body.style.background == "#2C2F33" ? "#FFFFFF" : "#2C2F33";
}