Dark Mode reverts back to defaul theme when re-opening browser

Hi @john2gr Thanks for using WP Dark Mode. The plugin keeps the dark mode activated throughout the session only that means if you close the browser and open the site again, it will show the default light theme.

But you can set the dark mode as a default color in the setting.

Is there any way to make/force the browser to remember the option that the user has selected? In all other plugins the browser remembers when/if a user has selected the Dark Mode and shows it to them when they re-open the browser. We don’t want to force it to everyone as some prefer the Light/Default Mode.

After some searching, it appears that this (the browser to “remember” what the user selected) is possible via localStorage. Can you help on how we can add the code? Theoretically, this should do the trick, right? Where should we place it though?

Here is the reference code: https://codepen.io/rishi111/pen/vYLQrxb

const darkMode = () => {
bodyEl.classList.toggle(‘wp_dark_mode_active’)
}
darkMediaQuery.addEventListener (‘click’, () => {
// Get the value of the “dark” item from the local storage on every click
setDarkMode = localStorage.getItem(‘wp_dark_mode_active’);

if(setDarkMode !== “on”) {
darkMode();
// Set the value of the itwm to “on” when dark mode is on
setDarkMode = localStorage.setItem(‘wp_dark_mode_active’, ‘on’);
} else {
darkMode();
// Set the value of the item to “null” when dark mode if off
setDarkMode = localStorage.setItem(‘wp_dark_mode_active’, null);
}
});

// Get the value of the “dark” item from the local storage
let setDarkMode = localStorage.getItem(‘wp_dark_mode_active’);

// Check dark mode is on or off on page reload
if(setDarkMode === ‘on’) {
darkMode();
}

• This reply was modified 3 years, 11 months ago by john2gr.
• This reply was modified 3 years, 11 months ago by john2gr.