so my website is dark mode by default and i have added a light mode button to make the website light and i want the light mode to stay when switching pages, how can i make the light mode stay when switching pages. JS
//light mode for home page
function lightMode() {
var element = document.body;
element.classList.toggle("light-mode");
var buttonText = document.getElementById('lightModeButton');
if (buttonText.innerHTML === "Light") {
buttonText.innerHTML = "Dark";
}
else {
buttonText.innerHTML = "Light"
}
var footerLight = document.getElementById('footer');
footerLight.classList.toggle("footer-color");
footerLight.classList.toggle("footer-color a");
}
// light mode function for my information page
function lightModeInformation() {
var textInfo = [document.getElementById('textInformation'), document.getElementById('textInformation2'), document.getElementById('h1Information')];
textInfo[0].classList.toggle("text-when-light");
textInfo[1].classList.toggle("text-when-light");
textInfo[2].classList.toggle("text-when-light");
var element = document.body;
element.classList.toggle("light-mode");
var buttonText = document.getElementById('lightModeButton');
if (buttonText.innerHTML === "Light") {
buttonText.innerHTML = "Dark";
}
else {
buttonText.innerHTML = "Light"
}
var footerLight = document.getElementById('footer');
footerLight.classList.toggle("footer-color");
footerLight.classList.toggle("footer-color a");
}
i tried using if statements but it didnt work
CodePudding user response:
A good way to achieve this would be using something like localStorage
or sessionStorage
. Session storage will be cleared when the user closes the tab/browser but localStorage
will be persisted until manually cleared by the user.
You can do something like localStorage.setItem('mode', 'dark')
or localStorage.setItem('mode', 'light')
when the function is called to switch between light and dark mode, and then on page load you can check this localStorage
value again and apply it.
Something along the lines of:
window.addEventListener("load", (event) => {
let mode = localStorage.getItem('mode')
if (mode === 'light') {
lightMode()
}
});
You could of course have another check here as well for the user's preferred mode using this line
const prefersDarkMode = window.matchMedia("(prefers-color-scheme:dark)").matches; // Returns true or false
Some more information: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
CodePudding user response:
I'd suggest saving the information about whether a user uses light or dark mode in the localStorage
. You can access this variable from the localStorage
on each of your sites from the same domain. It also persists sessions, if you don't delete it manually.
e.g. set the mode like localStorage.setItem('mode', 'light');
and refer to it like const mode = localStorage.getItem('mode');
Check out the docs.