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.
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');
}