Question

所以基本上我想为我的网站制作一个暗模式切换器。我有一个小的脚本开始。它基本上可以切换CSS样式。但是，如果我离开或刷新页面，样式显然不会保持下去...

<style>
    .mystyle {
        color:red !important;
        background-color: black !important;
    }

</style>

<script>
    function init(){ 
    var element = document.body;
   element.classList.toggle("mystyle");
}
</script>

所以我的目标是即使在刷新或更改页面后，也要使此切换按钮在整个网站上保持其当前状态...

Answer 1

一种简单的方法是将状态保存在localStorage中，并在加载页面时根据其值切换类。

这是实现它的方法：

<style>
  .dark-mode {
    color: red;
    background-color: black;
  }
</style>

<body>
  <button onclick="toggleMode()">Switch Mode</button>
</body>

<script>
  const body = document.body;

  if (localStorage.mode === 'dark') {
    body.classList.add("dark-mode")
  };

  function toggleMode() {
    body.classList.toggle("dark-mode");
    localStorage.setItem(
      'mode', localStorage.mode === 'light' || localStorage.mode === undefined ? 'dark' : 'light'
    );
  }
</script>

Answer 2

尝试使用add（）和remove（）函数删除和添加类，以下代码可能会起作用：

<script>
  var onOff=false; //to check of the class is active or not
  function init(){ 
  var element = document.body;
  if(onOff === false){
   element.classList.add("mystyle");
   onOff = true;
  }eles{
      element.classList.remove("mystyle");
      onOff = false;
  }
}
</script>

如何使用单个脚本更改多个元素的样式？

2 个答案: