Dark mode and Google maps cookies-CodePudding

I have 2 themes: white mode(default) and dark mode and when I reload the page/load another page it switches back to default theme and also it changes some images from html. How can I make a cookie to solve this problem?

var icon = document.getElementById("icon");

icon.onclick = function () {

document.body.classList.toggle("dark-theme");
if(  document.body.classList.contains("dark-theme")) {
    
    icon.src = "assets/white.svg";
    mis.src = "assets/misiune-b.svg"
    pnras.src = "assets/pnras-b.svg"
    bulb.src = "assets/white.svg"
    cam.src = "assets/cam-b.svg"
    man.src = "assets/man-b.svg"
    resurse.src = "assets/resurse-b.svg"
    consiliu.src = "assets/cladire-b.svg"
    dec.src = "assets/moneda-b.svg"
    pho.src = "assets/phone-b.svg"
    mail.src = "assets/mail-b.svg"
}
else {
    icon.src = "assets/moon.png"
    mis.src = "assets/misiune.svg"
    pnras.src = "assets/pnras.svg"
    bulb.src = "assets/.svg"
    cam.src = "assets/camera_.svg"
    man.src = "assets/management_.svg"
    resurse.src = "assets/resurse umane.svg"
    consiliu.src = "assets/ca.svg"
    dec.src = "assets/moneda.svg"
    pho.src = "assets/Phone.svg"
    mail.src = "assets/Mail.svg"
}

}

Also, another problem that I have is when I included a map from Google, I get this message:common.js:50 GET https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent?1shttps://www.google.com/maps/embed&2sgoogle-maps-embed&7snq9kpa&10e1&11b0&callback=_xdc_._9jkh3h&client=google-maps-embed&token=75745 net::ERR_BLOCKED_BY_CLIENT

CodePudding user response：

The code you provided would only work on the HTML you are currently on. By changing the page, realoding or closing, you reset all the variables and script stuff. The trick here is to use localstorage, to store the variables and access them even after change of page, reload or close.

The easiest answer is to point you to this nice tutorial, where is everything explained

CodePudding user response：

You need to save the theme choice somewhere. You could save it to a cookie in JS, something like, when the icon is clicked, create a selectedTheme cookie...

document.cookie = "selectedTheme=dark";

Then in JS, you can say "if cookie === 'dark' add the dark mode class to body tag".

That or save the setting to a Database and do a similar if statement on the body tag.

CodePudding user response：

Before your edit i wrote this, I hope this helps. A lot of users don't accept cookies... So :

        let darkMode = false;
        let myContent = null;
        let mySwitch = null;
        let display = null;
        document.addEventListener("DOMContentLoaded", onDomContentLoaded);
        function onDomContentLoaded(e){
            myContent = document.getElementById("myDiv");
            mySwitch = document.getElementById("switcher");
            display = document.getElementById("darkValue");
            display.textContent = "dark mode = "   darkMode;
            mySwitch.addEventListener("click",clickHandler);
        }
        function clickHandler(e){
            darkMode = !darkMode;
            
            if(darkMode==true){
                myContent.className = "black";
                display.textContent = "dark mode = "   darkMode;
            }
            else if(darkMode==false){
                myContent.className = "white";
                display.textContent = "dark mode = "   darkMode;
            }
        }

        .white{
            background-color: beige;
            color: grey;
        }
        .black{
            background-color:darkslategrey;
            color: beige;
        }

        <div id="myDiv" >
            <p>My text</p>
            <p id="darkValue"></p>
            <button id="switcher">switcher</button>
        </div>

CodePudding user response：

use css variables for managing colors and icons path