javascript - 我可以用 JavaScript 影响 CSS 吗？

Question

我是新手，如果这是一个愚蠢的问题，我深表歉意。基本上，我将 CSS 颜色设置为三个 :root 函数，并且 JavaScript 已为亮模式/暗模式切换完成所有工作，但现在我想要它，以便当暗模式为真时，CSS 中的颜色会发生变化。有没有办法做到这一点？ (即使这意味着复制 CSS 并使第二个具有深色模式颜色，而 JS 根据 HTML 中切换的正确或错误声明选择要选择的文件？

HTML/JS:

<li>
    <label>Night mode</label>
    <br>        
    <input type="checkbox" name="Nightmode" class="switch" id="nightModeCheckBox">
    <script>
        var nmbc = document.getElementById("nightModeCheckBox").checked;
        if (localStorage.getItem("nightMode") == "true"){
            document.getElementById("nightModeCheckBox").checked = true;
        }
    </script>
</li>
<li>
    <button onclick="settingsSave()" class="save">Save</button>
    <p id="saveText"></p>
    <script>
        function settingsSave() {
        var nmbc = document.getElementById("nightModeCheckBox").checked;
        if (typeof(Storage) !== "undefined") {
        localStorage.setItem("nightMode", nmbc);
        alert(localStorage.getItem("nightMode"));
        } else {
        alert("It seems your browser doesn't support local storage. Try updating it or using a different browser.");
        }
        }
        console.log(nmbc)
    </script>
</li>

CSS:

:root{
    --color1: White;
}

:root{
    --color2: rgb(230, 230, 230);
}

:root{
    --colorText: black;
}

Answer 1

document.documentElement.style.setProperty 会做你想做的事

document.documentElement.style.setProperty('--colorText', 'black');
document.documentElement.style.setProperty('--colorBack', 'yellow');

:root {
    --colorText:Red;
    --colorBack:White;
}
body {
    color: var(--colorText);
    background-color: var(--colorBack);
}

<div>
Should be BLACK on YELLOW not RED on WHITE
</div>