js改变字体颜色_前端更换自定义主题颜色的解决方案

我的一个产品化项目里产品提了一个需求就是可以更换主题颜色，不说废话直接上干货。

原理就是通过颜色选择器用户可以在页面选择指定的颜色然后通过js操作css变量覆盖。如果需要永久更换需要后端的配合吧选择的颜色传递给后端，然后每次页面初始化的时候再通过js操作css变量

首先把项目里所有的需要更换的主题css集合到一个样式文件里，这里运用了css的原生变量。

:root {
    --tn-nav-color: #4e6e53;
}
/*顶部导航栏的标题颜色*/
.tn-nav .tn-nav-menu .current-system {
    color: var(--tn-nav-color);
}

其次页面的选择器选择颜色（我这里用的是layui的选择器）就不上图了

重点来了如何通过js操作css变量

var root = document.querySelector(':root');
   $scope.changeColor = function(color){
       root.style.setProperty('--tn-nav-color',color)
   }
layui.use('colorpicker', function(){
    var colorpicker = layui.colorpicker;
    //渲染
    colorpicker.render({
        elem: '#test1' //绑定元素
        ,done: function(color){ //颜色改变的回调
            console.log(color)
            $scope.list.color =