Cambiar el color del tema del proyecto vue

Requisitos: diferentes proyectos deben introducir el mismo módulo, pero el color del tema de la interfaz de usuario debe modificarse

resolver:

1. El back-end proporciona una interfaz y el front-end establece dinámicamente el color del tema.

2. La configuración de color del tema de front-end está en el archivo menos

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

3. El archivo main.js solicita a la interfaz de color del tema que establezca el color del tema.

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