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" class="icon"> </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.
Advertisement
Answer
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'); }