javascript - 使用本地存储在 2 个样式表之间切换(一次切换)

Question

我有一个切换器和一个在样式表之间切换的脚本，但我不知道如何存储切换状态

我知道有多个这样的问题，但没有一个问题使用切换和本地存储以及 2 个样式表(而是 css 变量或其他东西，我的 css 是一团糟，无法使这些工作正常进行)。我是一名 UI 设计师，对 HTML/CSS 有一些了解，但我几乎没有时间学习 JS。

<link id="theme" rel="stylesheet" type="text/css" href="default.css" />


<input type="checkbox" id="tog"/>
<label for="tog" class="toggle" onclick="toggle()"></label>   


<script type='text/javascript'>
function toggle() {
  var el = document.getElementById("theme");
  if (el.href.match("default.css")) {
    el.href = "dark.css";    
  }
  else {
    el.href = "default.css";  
  }
}
</script>    

这很好用，但我需要保存切换，这样刷新后它就不会变回来。从我读过的内容来看，它是用本地存储完成的，但它超出了我的范围。

我在这里看到示例，每种样式都有多个链接/按钮，但我无法使它们适应切换。我试过了。你能帮忙吗？

Answer 1

像这样:

function toggle(theme) {
  var styleSheet = document.getElementById("theme");
  if (theme != styleSheet.href) styleSheet.href = theme;
  document.getElementById("tog").checked = styleSheet.href === "dark.css";
}
window.addEventListener("load",function() {
  var theme = localStorage.getItem("theme") || document.getElementById("theme").href;
  toggle(theme);
  document.getElementById("tog").addEventListener("change",function() {
    var theme = this.checked ? "dark.css" : "default.css"
    toggle(theme);  
    localStorage.setItem("theme",theme);
  })
})

<link id="theme" rel="stylesheet" type="text/css" href="default.css" />


<label>Toggle to dark theme <input type="checkbox" id="tog"/></label>