Keep dark or light mode over different pages with javascript-CodePudding

Basically, I got a dark mode on the front page, with the script being (from W3schools) :

<script>
function darklightmode() {
    var element = document.body;
    element.classList.toggle("dmode");
} </script>

And the button :

<button onclick="darklightmode()" style="background:none; border: none;">
                        <img src="images/ld-icon.png" >
                    </button>

and some CSS just for example :

.dmode li a{
transition: 1s all;
color: #2E3440;
background: none;}

So how can I, with some Javascript, make the mode the user is using stay between pages and not come back to default when accessing another page ?

Beginner here, any help appreciated.

CodePudding user response：

You'd need to store the current theme somewhere. Try using localstorage.

Example from How do i set dark mode theme across multiple pages? (this question is a duplicate):


    checkbox.addEventListener( 'change', function() {
         localStorage.setItem('dark',this.checked);
         if(this.checked) {
              body.classList.add('dark')
         } else {
              body.classList.remove('dark')     
         }
    });

and this on each page:


    if(localStorage.getItem('dark')) {
         body.classList.add('dark');
    }