通过JavaScript更新根css样式

Question

基本上我需要设置主题颜色，它作为模型属性从我的控制器使用JavaScript传递到我的CSS文件。

以下是当前CSS文件的根部分：

:root {
--clr-primary: #ffca00;
--clr-dark-blue: #1d1836;
/* --clr-accent: #4917D6; */
--clr-black-900: #1f1f1f;
--clr-black-800: #303030;
--clr-black-600: #3f3f3f;
--clr-white-off: #f7f7f7;
}

加载页面时，我需要将"--clr-primary"更新为任何主题颜色。

所以我所做的是使用JavaScript:

var jsonThemeColor = $('#menuThemeColor').val();
var themeColor = JSON.parse(jsonThemeColor)
console.log(themeColor)
root.style.setProperty('--clr-primary',jsonThemeColor);

然而，这并不奏效。请注意，我有一个单独的CSS文件，我没有在<style>标签中包含CSS。所以没有错误，只是颜色没有更新，而是显示为白色。

Answer 1

您可以执行类似的操作

document.documentElement.style.setProperty('--property', 'color');

您可以访问此链接以获取wesbos创建的演示。