window.addEventListener("DOMContentLoaded",(event)=>{
    if (typeof(Storage) !== "undefined") {
        light = localStorage.getItem("light");
        console.log("light="+localStorage.getItem("light"));
        darkMode();
    }
    else {
        localStorage.setItem("light",1);
        light = localStorage.getItem("light");
        console.log("light(else)="+localStorage.getItem("light"));
        darkMode();
    }
    document.getElementById("theButton").onclick =function() {darkMode()};

    function darkMode() {
        if(light==1){
         document.getElementById("theButton").innerHTML = "Light mode";
         document.getElementById("header").style.borderColor = "white";
         document.body.style.backgroundColor = "#302B30";
         var a =document.getElementsByClassName("dark");
         for(var i=0; i<a.length; i++){
             a[i].style.color="white";
             a[i].onmouseout = function() {mouseOut()};
            }

            localStorage.setItem("light",1);
            light = 0;
            console.log("light(lightmode=1)="+localStorage.getItem("light"));
        }

        else if (light==0){
            document.getElementById("theButton").innerHTML = "Dark mode";
            document.getElementById("header").style.borderColor = "black";
            document.body.style.backgroundColor = "#F9F7F3";
            var a =document.getElementsByClassName("dark");
            for(var i=0; i<a.length; i++){
                a[i].style.color="black";
                a[i].onmouseout = function() {mouseOut()};
               }
               localStorage.setItem("light",0);
               light = 1;
               console.log("light(darkmode=0)="+localStorage.getItem("light"));
        }

        function mouseOut() {
            document.getElementsByClassName("dark")
               if(light==1){
                 for(var i=0; i<a.length; i++){
                      a[i].style.color="black";
                    }
                }
               if(light==0){
                 for(var i=0; i<a.length; i++){
                     a[i].style.color="white";
                    }
                }
        }
    }
});