Javascript JS中的主题切换程序

我想在cookies中保存用户首选的主题（浅/暗）。有人能帮我吗？我真的不擅长JS。我提交我当前的脚本

样式表：

<link rel="stylesheet" href="custom.css" id="pagestyle2" type="text/css" charset="utf-8"/>
<link href="file-upload.css" id="pagestyle4" rel="stylesheet">
<link href="bootstrap.css" id="pagestyle3" rel="stylesheet">
<link href="hg.css" id="pagestyle" rel="stylesheet">

<li class="nav-item" id="pagestylechoose">
    <a href="#" onclick="swapStyleSheet('dark.css');swapStyleSheet2('custom-dark.css');swapStyleSheet3('bootstrap-dark.css');swapStyleSheet4('file-upload-dark.css')"></a>
</li>

    function swapStyleSheet(sheet) {
        document.getElementById('pagestyle').setAttribute('href', sheet);
    }
    function swapStyleSheet2(sheet) {
        document.getElementById('pagestyle2').setAttribute('href', sheet);
    }
    function swapStyleSheet3(sheet) {
        document.getElementById('pagestyle3').setAttribute('href', sheet);
    }
    function swapStyleSheet4(sheet) {
        document.getElementById('pagestyle4').setAttribute('href', sheet);
    }

---

我建议您有一个在单击按钮时被调用的函数，特别是样式表名称无论如何都是硬编码的

<li class="nav-item" id="pagestylechoose">
    <a href="#" onclick="changeStyleToDark()"></a>
</li>

现在，要获得“阅读”用户样式，您可以使用

function getUserStyle() {
  return getCookieByName("style");
}

function getCookieByName(cookieName) {
  var cookieString = RegExp(cookieName + "=[^;]+").exec(document.cookie);
  return decodeURIComponent(!!cookiestring ? cookiestring.toString().replace(/^[^=]+./,"") : "");
}

现在，在脚本的开头，每当页面加载时，检查cookie并调用

changeStyleToDark

，如果它设置为

dark

window.onload = (event) => {
  if (getUserStyle() === "dark") changeStyleToDark();
};

---

尽管它需要对CSS进行一些修改，但有另一种解决方案，而不必加载不同的样式表

加载一个默认版本，例如，让我们说它是轻版本。然后，当访问者想要

dark

版本时，一个名为

dark

的类被添加到主体中

window.onload = (event) => {
  if (getUserStyle() === "dark") changeStyleToDark();
};

然后在CSS的黑色版本中，只需在所有CSS选择器的开头添加

body.DARK

Fiddle：（所以代码片段会阻塞本地存储，所以我使用了JSFIDLE）

通过这种方式，您可以一次加载所有CSS文件，如果需要，甚至可以压缩它们

var ChangeTheme = document.querySelector(".ChangeTheme");

if(localStorage.getItem("theme") === undefined){
   localStorage.setItem("theme","light");
}

function setTheme(){
   document.body.classList.remove("dark");
   document.body.classList.remove("light");
   document.body.classList.add(localStorage.getItem("theme"));
}

ChangeTheme.addEventListener("click",function(){
   localStorage.setItem("theme",(localStorage.getItem("theme") === "dark") ? "light" : "dark");
   setTheme();
});

setTheme();

比如你的CSS

让我们根据你所拥有的：

a{color:#000000;}

对于黑暗，只需将其更改为：

body.dark a{color:#ffffff;}

---

你可以使用这个，如果你不在jQuery的中间，我确实介意当OP没有标记jQuery时jQuery的答案。这个问题没有显示出试图存储所选主题的意图，所以很难告诉你有什么困难。请注意，切换主题的更好方法是使用并将其切换到活动主题。这里有一个到@sølvetraftøe的链接，人们在2020年仍在使用jQuery，这太疯狂了。您好，谢谢您的回复，但当我刷新我的网站时，它仍会更改为默认主题。cookie在浏览器缓存中保存为style value:dark，但在刷新后，我仍然有白色布局。@JohnCloud如果cookie的值为

dark

，您只需检查加载时的

，如果是，请更改主题。检查添加的代码。我按照您的说明放置了所有内容（至少我认为是这样），在刷新页面后，我仍然看到白色布局，即使cookie style=dark。这是我的javascript代码。我把它放在footer.php中（也许这是个问题）。我还试图在标记的header.php文件中放入window.onload代码片段，但没有帮助。