The checkbox does not change its checked value after page refresh

Question

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>

When you refresh a page, JS starts all over again, like it's the first visit. To prevent that, you have to use cookies, or localStorage, any technique that allows retaining information beyond navigation. When the checkbox is changed, you need to store the value. And when the page is loaded you need to read it and check the checkbox yourself if the theme is dark mode. — , May 11 '20 at 13:01
Does this answer your question? [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) — , May 11 '20 at 13:03

mr. pc_coder · Accepted Answer · 2020-05-11T16:04:43.440

1

Then you need to use storage

to set

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

  if (mode.checked) {

    setActiveStyleSheet('dark');
    localStorage.setItem("ex_mode", "dark");

  } else {

    setActiveStyleSheet('light');
    localStorage.setItem("ex_mode", "light");
  }
}

to get call this when page is loaded

    window.addEventListener('load', function() {
       setActiveStyleSheet(localStorage.getItem('ex_mode') ? localStorage.getItem('ex_mode') :"light" );
       document.getElementById("theme-toggle").checked = localStorage.getItem('ex_mode')=="dark" ? true:false ;
    });

or put your body tag

<body onload="setActiveStyleSheet(localStorage.getItem('ex_mode') ? localStorage.getItem('ex_mode') :'light')">

edited May 11 '20 at 16:04

answered May 11 '20 at 13:03

mr. pc_coder

16,412
3
32
54

Can i get it like this? As I mentioned, I do not know much about javascript. @pc_coder https://jsfiddle.net/burkyweb/2rxztgs4/1/ – burakios May 11 '20 at 14:10
Thanks but checked is still unchanged. @pc_coder https://streamable.com/74ccv3 – burakios May 11 '20 at 15:20
Code is working just also change checkbox situation. I edited code – mr. pc_coder May 11 '20 at 16:05
This code has certainly seen my work. Thank you so much. – burakios May 11 '20 at 21:50
can you look at this topic please: https://stackoverflow.com/questions/63941356/how-can-i-show-light-logo-in-dark-mode – burakios Sep 17 '20 at 15:43

score 1 · Answer 2 · answered May 11 '20 at 13:04

1

You need use localSlorage or Cookie to save the current theme. Because page rendering all time when you refresh.

https://developer.mozilla.org/ru/docs/Web/API/Window/localStorage https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

answered May 11 '20 at 13:04

Dima Vak

599
5
20

The checkbox does not change its checked value after page refresh

2 Answers2