给项目页面设置主题颜色

需求分析

每款应用都会有自己的主题颜色，但大部分都是在css文件里面写死的。 直到有一天，产品提了一个需求：要让我们系统的主题色跟个人账号挂钩，用户可选择自己的主题色，并且在其他电脑登录时，显示用户选择的主题色。

接到需求后进行分析：

方法一： 预先写好几套主题色，通过账号的样式code加载不同的主题颜色

方法二： 把主题颜色值保存到数据库进行维护，在请求用户信息时，后台把用户所选的主题色值返回来给我(我采取的方式)

实现过程

在实现方法一时，有个局限性，当需要增加主题颜色时，前端就需要先写好一套主题颜色，并且如果主题颜色过多，后期的代码量就会过多，维护也有难度，所以最终决定选择方法二

方法二实现过程

在前端开发中，不管是sass、less、还是stylus，书写样式时都会用到变量，好处就是：修改页面主题颜色时，只需要修改变量值，大大提高效率。

例如：

@main-color: #478eed; // 主题色
@sub-color: #49c0e7; //辅助颜色
@main-font-color: #333; //1级字体颜色
@sub-font-color: #999; //2级字体颜色
@border-color: #cdcdcd; //常规描边,不可用状态
@bg-color: #efefef; // 背景颜色
@first-gray: #ececec; // 一级灰度
@second-gray: #dfdfdf; // 二级灰度

那么问题来了，如何在请求到用户信息后，把用户的主题颜色值跟我们的变量关联呢？

后台返回来的颜色数据，例如：

通过网上查找资料，找到阮一峰老师的《css变量教程》，有兴趣的同学可点击查看教程。

修改后，定义好初始主题，如下：

:root {
  --mainColor: #478eed;
  --mainHoverColor: #5194EF;
  --secondColor: #EAF6FE;
  --secondHoverColor: #CFE5FC;
  --subColor: #49c0e7;
  --mainFontColor: #333;
  --subFontColor: #999;
  --deleteColor: #f56c6c;
  --borderColor: #cdcdcd;
  --firstGray: #f4f4f4;
  --secondGray: #ececec;
  --bgColor: #dfdfdf;
}

@main-color: var(--mainColor); // 主题色
@main-hover-color: var(--mainHoverColor); //主题hover颜色
@second-color: var(--secondColor); //二级主题色
@second-hover-color: var(--secondHoverColor); //二级主题hover色
@sub-color: var(--subColor); //辅助颜色
@main-font-color: var(--mainFontColor); //1级字体颜色
@sub-font-color: var(--subFontColor); //2级字体颜色
@delete-color: var(--deleteColor); //红色字体
@border-color: var(--borderColor); //常规描边,不可用状态
@first-gray: var(--firstGray); // 一级灰度
@second-gray: var(--secondGray); // 二级灰度
@bg-color: var(--bgColor); // 背景颜色

接下来，在请求用户信息后，讲后端返回的主题颜色值覆盖本地的:root，操作如下：

// 设置主题颜色
if (res.data.theme_value) {
  let themeVal = JSON.parse(res.data.theme_value)
  Object.keys(themeVal).forEach(e => {
    document.documentElement.style.setProperty('--' + e, themeVal[e])
  })
}

最终，就可以实现我们的需求