The checkbox does not change its checked value after page refresh

I am not familiar with javascript. I only work for dark mode with the information I research on the internet. I only change links in the old way. I am successfully changing links. However, when the page is refreshed in any mode, it changes to the checked default mode (light). I will be happy to any help.

<link rel="stylesheet" title="light" href="site.css">
<link rel="stylesheet" title="dark" href="site-dark.css">
<script>

function switchMode() {
  var mode = document.getElementById("theme-toggle");

  if (mode.checked) {

    setActiveStyleSheet('dark');

} else {

    setActiveStyleSheet('light');

}

}

This is the switch Code:

<!-- Dark & Light Mode-->
        <div class="button-con">
          <label for="theme-toggle">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="dayIcon" x="0px" y="0px" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
              <g id="Sun">
                <g>
                  <!--icon-->
              </g>
          </g>
      </svg>
  </label>
  <input class="toggle" id="theme-toggle" type="checkbox" onclick="switchMode()">
  <label class='toggle-button' id="theme-toggle"></label>
  <label for="theme-toggle">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="nightIcon" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
       <!-icon-->
  </svg>
</label>
</div>