vue项目更换主题色

需求：不同的项目需要引入同一个模块，但是ui主题色需要修改

解决：

1，后端提供接口，前端动态设置主题色

2，前端主题色配置在less文件中

/** 用于less变量声明 */
@border_color: #e6e6e6;    // 边框颜色
@main_theme: var(--mainTheme, #50CFA0);    // 按钮颜色 字体颜色
@main_backdrop_theme: var(--mainBackdropTheme, rgba(23, 94, 250, 0.1));      // 半透明背景色

3，main.js文件请求主题色接口设置主题色

async function getThem() {
    
    
  const params = {
    
    
    codes: ['mainTheme', 'mainBackdropTheme']
  };
  //axios 请求接口
  const result = await CommonServe.getTheme('INDEX_ID', params);

  if (result.code === 0) {
    
     // 登陆成功
  //设置主题色
    document.getElementsByTagName('body')[0].style.setProperty('--mainTheme', result.data.mainTheme.value ? result.data.mainTheme.value : '#50cfa0');//如果没有值，就默认一个颜色
    document.getElementsByTagName('body')[0].style.setProperty('--mainBackdropTheme', result.data.mainBackdropTheme.value ? result.data.mainTheme.value : '#50cfa0');//如果没有值，就默认一个颜色
  }
}
getThem();