如何阻止 CSS 样式表在刷新页面后重置为默认值？

Question

我有这段代码：

$(document).ready(function() {
    $(".lightDark").hide();
    $("#changeTheme").click(function() {

        $(".lightDark").toggle("slow");
    });

    // Switch theme

    $('#lightTheme').click(function() {
         $('link[href="darkMode.css"]').attr('href','lightMode.css');
    });

    $('#darkTheme').click(function() {
        $('link[href="lightMode.css"]').attr('href','darkMode.css');
    });
});

body {
background-color: black;
}

.changeThemeButtons {
  float: right;
  margin-top: 50px;
  margin-right: 50px;
  border:2px solid white;
  border:none;
  color:white;
}

.changeThemeButtons td {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.6em;
  text-transform: uppercase;
  color:white;
  text-align: center;
}

.changeThemeButtons th {
  background-color: #733FFF;
  border-radius: 100px;
  height:200px;
  width:200px;
}

#changeTheme {
  cursor: pointer;
}

#changeTheme i {
  color:#f00;
}

#darkTheme {
  color:black;
  margin-right: 50px;
}

#lightTheme {
  color:white;
}

<script src="https://kit.fontawesome.com/c22b2f5999.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" id="darkMode" href="darkMode.css">


<div class="block two">
         <nav>
            <a href="#about">About me</a>
            <a href="#myWork">My Work</a>
            <a href="#services">Services</a>
            <a href="#contact">Contact</a>
         </nav>
         
         
         <table class="changeThemeButtons" align="right">
            <tr>
               <td><a id="changeTheme">Change Theme &nbsp;<i class="fas fa-caret-down"></i></a></td>
            </tr>
            <tr>
               <th class="lightDark">
                  <a href="#" id="darkTheme"><i class="fas fa-circle fa-3x"></i></a> 
                  <a href="#" id="lightTheme"><i class="fas fa-circle fa-3x"></i></a>
               </th>
            </tr>
         </table>

一切正常，直到您在 lightMode.css 并假设您刷新页面，然后它会重置为 darkMode.css。我试图从 HTML 中删除默认的 darkMode.css（使用 JQuery），但它似乎不起作用。我需要它保持 lightMode（如果选择），直到您再次单击以手动更改为 darkMode。

Answer 1

您需要为首次访问者提供默认主题。
您需要将用户选择存储在某个地方（cookie、本地存储或数据库等）
在文档准备就绪时，从您的存储中读取用户的首选主题并应用相应的 css 文件。如果没有偏好，就保留默认主题。

Answer 2

您可以像下面这样将值存储在本地存储中：

$(document).ready(function() {

  const theme = localStorage.getItem('mode');
  console.log(theme);
  if(theme){
    $('link[id="darkMode"]').attr('href',theme);
 }
    $("#changeTheme").click(function() {

        $(".lightDark").toggle("slow");
    });

    // Switch theme

    $('#lightTheme').click(function() {     
         $('link[id="darkMode"]').attr('href','lightMode.css');
      localStorage.setItem('mode','lightMode.css');
    });

    $('#darkTheme').click(function() {
        $('link[id="darkMode"]').attr('href','darkMode.css');
        localStorage.setItem('mode','darkMode.css');
    });
});

Answer 3

只需将您的主题 css 放入 css 文件并将其传递给函数，在页面加载时 if (localStorage.getItem("theme") != "") 检查主题是否已设置.. 这里有一个例子：

    if (localStorage.getItem("theme") != "") {
        loadcssfile(localStorage.getItem("theme"));
      }

      function loadcssfile(filename) {
        if (filename != "") {
          localStorage.setItem("theme", filename);
        }
        
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);

        if (typeof fileref != "undefined")
          document.getElementsByTagName("head")[0].appendChild(fileref);
      }

  <div onclick="loadcssfile('css/pink.css')" id="pink">
      Pink
    </div>
    <div
      onclick="loadcssfile('css/blue.css')" id="blue">
      Blue
    </div>

如何阻止 CSS 样式表在刷新页面后重置为默认值？

How do I stop CSS stylesheet from resetting to default after refreshing the page?

html

javascript

css

jquery

stylesheet