How do I prevent dark mode from resetting when loading page?

Question

I read that either local storage or session storage would do the trick, but I'm having a hard time trying to make it work.

function changeStyleByClass(className, classToggle){
var element = document.getElementsByClassName(className);
for (var i=0; i < element.length; i++) {
    element[i].classList.toggle(classToggle);
}}
document.getElementById("bulb").addEventListener("click", () => {
changeStyleByClass("bgcolor-lightdark", "dark-mode");
changeStyleByClass("nav", "dark-mode");
changeStyleByClass("nav-item", "dark-mode");
changeStyleByClass("card", "dark-mode");
changeStyleByClass("container", "dark-mode");
changeStyleByClass("bulbicon","dark-mode");});

I'd like to navigate through pages and still keep the theme that is currently on.

Thanks in advance!

Answer 1

You can use localStorage.setItem to store data and localStorage.getItem to retrieve data. One thing that I've noticed is that your light bulb button turns dark mode on, but doesn't turn dark mode off. I have a solution that also simplifies your process of changing themes.

 var togButton = document.getElementById("togButton"); //Check localStorage //It's commented out because it doesn't work in Stack Overflow snippet //darkOn = localStorage.getItem("dark") == "true"? true: false; setTheme(); function setTheme(){ //Save to localStorage //It's commented out because it doesn't work in Stack Overflow snippet //localStorage.setItem("dark", darkOn? "true": "false"); if(darkOn){ document.body.setAttribute("theme", "dark"); togButton.innerHTML = "Turn off dark mode."; } else{ document.body.setAttribute("theme", "light"); togButton.innerHTML = "Turn on dark mode."; } } var darkOn = false; function toggle(){ darkOn =;darkOn; setTheme(). } togButton,addEventListener("click"; toggle);

 /*By doing body[theme=dark] it only takes effect if the <body> tag has an attribute called theme which is dark.*/ body[theme=light].sampleClass{ color: black; background-color: white; } body[theme=dark].sampleClass{ color: mediumseagreen; background-color: black; }

 <body> <h1 class="sampleClass">Theme changes.</h1> <button id="togButton">Turn on dark mode.</button> </body>

This method is easier because you don't need to manually type all of the classes you want to turn to dark mode, you can just have bot dark and light modes in the CSS file.

I hope you understand the javascript + css. Good luck and ask me if you can't understand part of it.

Edit: Called setTheme() right away.

Edit 2: Explanation

The part which is localStorage.getItem("dark") == "true"? true: false" localStorage.getItem("dark") == "true"? true: false" is called turnary. The turnary syntax is condition ? value if true : value if false . It is basically the same thing as doing

if(localStorage.getItem("dark") == "true"){
    darkOn = true;
}
else{
    darkOn = false;
}

This is because localStorage is like a Map where the keys and values are both strings.

Moving on to the next part. darkOn = false; Just declares the variable darkOn and by default it if false . The toggle function changes darkOn to be the opposite of what it is. the exclamation mark negates boolean values, so darkOn =;darkOn; turns darkOn to false if it was previously true , and true if it was previously false.

Then it calls the setTheme function to update the theme attribute in the <body> tag, causing the css to change. It also saves the current value to localStorage .

How do I prevent dark mode from resetting when loading page?

Question

1 answers

solution1
0 ACCPTED 2020-05-12 19:12:34

How do I prevent dark mode from resetting when loading page?

Question

1 answers

solution1 0 ACCPTED 2020-05-12 19:12:34

solution1
0 ACCPTED 2020-05-12 19:12:34