动态注释掉 CSS 样式表？

Question

我使用本地存储为网站构建了相当繁重的明暗模式。 从一个切换到另一个是无缝的，两者看起来都很棒。 然而，我在导航暗模式时遇到了闪烁问题。

两个样式表都以这个顺序在我的 header.php 中向上

    <link id="light" rel="stylesheet" type="text/css" title="day" href="https://example.com/public/css/main.css">
    <link id="dark" rel="stylesheet" type="text/css" title="night" href="https://example.com/public/css/night.css">

本地存储开关在同一个文件中使用 javascript 向下处理。

尝试了一百万件事后，原来是当我注释掉上面提到的第一个样式表时，闪烁消失了，浏览是无缝的。

所以我的问题是：如何使用将添加到 localstorage 部分的一些 javascript 命令注释掉样式表的第一行？还是有其他方法可以动态注释掉该样式表？

这里是我需要的本地存储功能：

<script>
document.getElementById("light").href = localStorage.getItem('light');
document.getElementById("dark").href = localStorage.getItem('dark');

function dayoff() {
document.getElementById("light").href = 'https://example.com/public/css/night.css';
    localStorage.setItem( 'light', 'https://example.com/public/css/night.css' );
document.getElementById("light").href = 'https://example.com/public/css/night.css';
    localStorage.setItem( 'dark', 'https://example.com/public/css/night.css' );
document.getElementById("logo").src = 'https://example.com/public/img/toplogo-night.png';
    location.reload();
}
</script>

Answer 1

您应该保留用户正在使用的模式（亮或暗）

localStorage.setItem('mode', 'light or dark');

那么你应该根据用户使用的模式添加样式表。

你的功能

function dayoff() {
   // toggle function 
   if(localStorage.getItem("mode") === null || localStorage.getItem("mode") == "light"){
       localStorage.setItem("mode", "dark");
   }
   else{
       localStorage.setItem("mode", "light");
   }
   location.reload();
}
if(localStorage.getItem("mode") === null){
   // first time visitors
    $('head').append('<link id="light" rel="stylesheet" type="text/css" href="https://example.com/public/css/main.css">');
}
else{
   // returning users
   if(localStorage.getItem('mode') == "light"){
      $('head').append('<link id="light" rel="stylesheet" type="text/css" href="https://example.com/public/css/main.css">');
   }
   else{
      $('head').append('<link id="dark" rel="stylesheet" type="text/css" href="https://example.com/public/css/dark.css">');
   }
}