如何恢复 javascript 对 css 所做的更改

Question

所以我有一个按钮可以为我的网络应用程序切换简单的深色主题。

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

一旦用户点击，就会在 javascript 中激活此功能。

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

这只会改变背景。我想知道用户第二次单击该按钮是否会恢复该功能所做的更改。（即切换开/关）提前感谢您的时间和帮助！

Answer 1

您可以通过切换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>