javascript - JS 中的主题切换器

Question

我想在 cookie 中保存用户首选主题(浅色/深色)。有人可以帮我吗？我真的不擅长 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>

切换器 JS:

    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);
    }

Answer 1

虽然它需要对您的 CSS 进行少许修改，但还有另一种解决方案，无需加载不同的样式表。

加载一个默认版本，对于这个例子，假设它是轻量级版本。然后当访问者想要 dark 版本时，一个名为 dark 的类被添加到 BODY。

然后在您的 DARK 版本的 CSS 中，只需将 body.dark 添加到所有 CSS 选择器的开头即可。

fiddle :https://jsfiddle.net/Lw7461ey/ (SO Snippets 会阻塞 localstorage，所以我使用了 jsfiddle)

通过这种方式，您可以一次加载所有 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;}