使用css变量管理颜色和图标路径

你提供的代码只能在你当前使用的HTML上运行。通过改变页面，重新编码或关闭，你重置了所有的变量和脚本。这里的技巧是使用本地存储，存储变量和访问它们，即使在改变页面，重新加载或关闭。
最简单的答案是指向this nice教程，其中对所有内容进行了解释

你需要把主题保存在某个地方。你可以把它保存到JS中的一个cookie中，比如，当图标被点击时，创建一个selectedTheme cookie...
document.cookie = "selectedTheme=dark";
然后在JS中，你可以说“如果cookie === 'dark'，则将dark模式类添加到body标记”。
或者将设置保存到Database中，并对body标记执行类似的if语句。

在你编辑之前，我写了这个，我希望这能有所帮助.很多用户不接受cookies ...所以：

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" class="white">
            <p>My text</p>
            <p id="darkValue"></p>
            <button id="switcher">switcher</button>
        </div>