app更换主题色的方法（uni-app为例）

1.对于下划线，背景色，普通颜色字体的处理方式如下：

①如果后端返回的是#******的方式，通过下面的方法转换为rgb。

hexToRgb: function(hex) {
                var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                return result ? {
                    r: parseInt(result[1], 16),
                    g: parseInt(result[2], 16),
                    b: parseInt(result[3], 16)
                } : null;
            },

然后将颜色写进全局的js变量中，如下：

app.globalData.glBackground = "linear-gradient(to right, rgba(" + r + "," + g + "," + b + ",0.6), rgba(" + r +
                                "," + g + "," + b + ",1))";
app.globalData.glBottom = "6rpx solid rgba(" + r + "," + g + "," + b + ",1)";

that.glColor = app.globalData.glColor;

②在页面上进行颜色拿取

:style="'background-image:'+glBackground"，通过大致的这样的拼接进行颜色获取。

2.对于图片的处理稍微麻烦一些，首先需要拿到所有的svg图，下面我写好了一个组件，可以直接调用，原理是用一个view去包裹图片，然后在svg图的下面绘制了一个等大的图片，将该图片上移，把原图片顶出去，然后将容器设置为overflow-hidden即可。

组件输入：width：图片宽度。    height：图片宽度。    imgSrc：图片路径

组件代码见个人博客          组件库--svg封装    中

 

总结：主题色最好在进行网页绘制阶段就进行调整，否则后期会花费更多时间和精力去处理。