Answered Help with cookies that will save site settings

[NotRankovic]

Hello,
I'm new to learning java script, I made a small script that will change the theme on my site (and icon for dark theme and light theme), but I have the following problem:
I don't know how to create cookies that when someone turns on the dark theme, they save it, and when someone refreshes the site, it loads the site in the theme the user was in last time.
Thanks!

    <script>

        var icon = document.getElementById("icon")

        icon.onclick = function() {
            document.body.classList.toggle("dark-mode");
            if(document.body.classList.contains("dark-mode")){
                icon.src = "img/Logo/Light Mode.jpg";
            }else{
                icon.src = "img/Logo/Dark Mode.png";
            }
        }

    </script>

 

[Johna]

It's much better to use localStorage rather than cookies for this.

Here's how to do it with localStorage:

var icon = document.getElementById("icon");
var theme = localStorage.getItem("theme");

if (theme) {
    if (theme == "dark-mode") {
        document.body.classList.add(theme);
        icon.src = "img/Logo/Dark Mode.png";
    } else {
        icon.src = "img/Logo/Light Mode.jpg";
    }
}

icon.onclick = function() {
    document.body.classList.toggle("dark-mode");
    if (document.body.classList.contains("dark-mode")) {
        icon.src = "img/Logo/Light Mode.jpg";
        localStorage.setItem("theme", "light-mode");
    } else{
        icon.src = "img/Logo/Dark Mode.png";
        localStorage.setItem("theme", "dark-mode");
    }
}

 

[Johna]

Move var icon = document.getElementById("icon") to the top of the code, I think that should fix it.

 

[NotRankovic]

Move var icon = document.getElementById("icon") to the top of the code, I think that should fix it.

Thanks, it is working <3