Как остановить восстановление таблицы стилей 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 и, скажем, вы обновили sh страницу, затем он будет сброшен к darkMode. css. Я пытался удалить defaultMode по умолчанию. css из HTML (с JQuery), но, похоже, он не работает. Мне нужно, чтобы он оставался в режиме LightMode (если он выбран), пока вы не нажмете снова, чтобы переключиться на DarkMode вручную.

Answer 1

Просто поместите вашу тему 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>

Answer 2

Вы можете сделать что-то вроде ниже, чтобы сохранить значение в localstorage:

$(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

1. Вам необходимо предоставить тему по умолчанию для первого посетителя.
2. Вам нужно где-то сохранить выбор пользователя (cook ie, локальное хранилище или база данных и т. Д. c.) * 1004. *
3. На готовом документе прочитайте предпочитаемую пользователем тему из своего хранилища и примените соответствующий файл css. Если предпочтений нет, просто оставьте тему по умолчанию.