Switching to dark mode does not persist between pages

Hi there,

I enqueued all styles and scripts in wordpress and added a toggle to dark mode to the menu.

The toggle works on the page I am currently on but when I navigate to a different page, it switches back to the default light mode.

Is there a quick way around this?

I am gonna try some javascript so by the time you check the website listed below it might be fixed!!! Hopefully

Cheers

Hi, thanks for your reply.

That didn't work sorry! I added the data remember attribute as follows:

	                <div id="theme" class="header-misc-icon d-sm-block">
	                    <button id="theme-switcher" type="button" class="btn btn-dark body-scheme-toggle"
	                        data-bodyclass-toggle="dark" data-add-class="btn-warning" data-remove-class="btn-dark"
	                        data-remember="true"
	                        data-add-html="<i class='bi-brightness-high align-middle'></i><span class='visually-hidden'>Light Mode</span>"
	                        data-remove-html="<i class='bi-moon-stars align-middle'></i><span class='visually-hidden'>Dark Mode</span>"><span
	                            class="visually-hidden">Dark Toggle</span></button>
	                </div>

Please can you take another look?

PS : I ended up creating two HTML buttons and using the script herewith (because any script I created relating to alternating the icons conflicted with your schemetoggle.js):

TWO BUTTONS

<!-- Dark mode toggle button (shown in light mode) -->
<button id="toggleToDarkMode" class="btn btn-dark" style="display: none;"><i
class="bi bi-moon-stars align-middle"></i></button>
<!-- Light mode toggle button (shown in dark mode) -->
<button id="toggleToLightMode" class="btn btn-warning" style="display: none;"><i
class="bi bi-brightness-high align-middle"></i></button>

FOOTER SCRIPT:

<script>
document.addEventListener('DOMContentLoaded', function() {
var toggleToDarkModeButton = document.getElementById('toggleToDarkMode');
var toggleToLightModeButton = document.getElementById('toggleToLightMode');

function updateButtonVisibility() {
    if (document.body.classList.contains('dark')) {
        toggleToDarkModeButton.style.display = 'none';
        toggleToLightModeButton.style.display = '';
    } else {
        toggleToDarkModeButton.style.display = '';
        toggleToLightModeButton.style.display = 'none';
    }
}

// Check local storage for dark mode preference and apply it
if (localStorage.getItem('darkMode') === 'true') {
    document.body.classList.add('dark');
} else {
    document.body.classList.remove('dark');
}

updateButtonVisibility(); // Update the button visibility on load

toggleToDarkModeButton.addEventListener('click', function() {
    document.body.classList.add('dark');
    localStorage.setItem('darkMode', 'true');
    updateButtonVisibility();
});

toggleToLightModeButton.addEventListener('click', function() {
    document.body.classList.remove('dark');
    localStorage.setItem('darkMode', 'false');
    updateButtonVisibility();
});

});
</script>

Obviously it would be better if the data attribute you suggested worked, so please take a look - it would be a very useful feature and I am planning on using Canvas for many websites so I am interested in an unlimited license.

Kind regards,

Pete

PPS - I added the data-remember attribute you have suggested to the Canvas 7 files directly - in the raw html template you provided via download - and that did not work either, so this issue is not WordPress related

Brilliant - that worked - thank you very much for taking the time to do this.