前端更换自定义主题颜色的解决方案

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

原理就是通过颜色选择器用户可以在页面选择指定的颜色然后通过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 = color
            console.log($scope.list.color)
            $scope.changeColor($scope.list.color)
            $scope.save()
        }
    });
});
/***保存信息***/
        $scope.save = function () {
            //提交遮罩层
            $('.save-modal').show();
            if ($scope.isSubmit === true) {
                console.log('请勿重复提交');
                return;
            }
            console.log("提交数据");
            console.log($scope.list);
            colorService.add($scope.list).then(function (data) {
                //移除遮罩层
                $('.save-modal').hide();

                if (data.errorCode == 0) {
                    toastr.success("保存成功！", "更换主题");
                } else {
                    toastr.error("保存失败！", "更换主题");
                }
            }, function () {
                //移除遮罩层
                $('.save-modal').hide();

                toastr.error("保存失败！", "更换主题");
            })
        };

第一次写文章可能写的不太好，也是给自己做个记录。接下来给大家2个链接是关于js操作css的方法，我是参考2位老哥的。

wow.techbrood.com/fiddle/3267…