Change the theme color of the vue project

Requirements: different projects need to introduce the same module, but the ui theme color needs to be modified

solve:

1. The back end provides an interface, and the front end dynamically sets the theme color

2. The front-end theme color configuration is in the less file

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

3. The main.js file requests the theme color interface to set the theme color

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();