使用本地存储在 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

<script>

    function toggle() {
        var el = document.getElementById("theme");
        var theme = (el.href === 'default.css') ? 'dark.css' : 'default.css';
        el.href = theme;
        localStorage.setItem('theme', theme);
    }

    function defaultTheme() {
        var el = document.getElementById('theme');
        var theme = localStorage.getItem('theme');

        if (theme) {
            el.href = theme
        }
    }

    defaultTheme();

</script>

Answer 2

像这样：

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>