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

Question

I have this piece of code:

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

Everything works fine, until the point where you're on lightMode.css and let's say you refresh the page, then it would reset to the darkMode.css. I have tried to remove the default darkMode.css from HTML (with JQuery), but it doesn't seem to work. I need it to stay to lightMode (if selected) until you'd click again to change to darkMode manually.

Answer 1

Just put your theme css in a css file and pass it to the function, On page load the if (localStorage.getItem("theme") != "") checks if theme has been set.. Here you have an example:

    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>