使用 Javascript 更新 CSS 变量

如果您正在构建应用程序或 SaaS 平台，或者实际上是任何网站，将所有颜色存储为 CSS 变量，然后更新这些变量以更改应用程序的主题会很有用。

幸运的是，这相对容易实现。想象一下，您的 CSS 变量设置如下：

    :root {
        --main-background: blue;
        --main-sidebar: red;
        /* Yes these colors do not match */
    }

:rootCSS 样式存储在document.documentElement. 所以我们可以通过它访问它的所有样式。所以在 JS 中，我们需要做的就是：

    document.documentElement.style.setProperty("--main-background", "yellow");