动态改变主题颜色，less变量动态改变

主要是通过window.less.modifyVars(colorData).then(()=>{}).catch(()=>{})来改变less变量。做后台管理系统时，经常会遇到个人设置——对整个项目的颜色进行个性化的设置。2，配置setting.js(封装改变less变量的函数)1，color.less文件中配置颜色变量。...

Sarah无敌

6421人浏览 · 2022-08-04 17:18:40

Sarah无敌 · 2022-08-04 17:18:40 发布

做后台管理系统时，经常会遇到个人设置——对整个项目的颜色进行个性化的设置。

主要是通过window.less.modifyVars(colorData).then(()=>{}).catch(()=>{})来改变less变量

1，color.less文件中配置颜色变量

在vue2脚手架中使用less全局变量_那也她太美的博客-CSDN博客_vue中使用less变量

//定义颜色变量
@primary-color: #D04A02;
@link-color: #1890ff; // 链接色
@success-color: '#22992E'; // 成功色
@warning-color: '#FFBF1F'; // 警告色
@error-color: '#C52A1A'; // 错误色
@font-size-base: 14px; // 主字号
@menu-bg-color:#2D2D2D;   //菜单背景色
@menu-font-color:#F4F4F4;   //菜单字体颜色
@menu-hover-bgcolor:#FC7A00;   //菜单高亮背景色
@menu-hover-fontcolor:#F4F4F4;   //菜单高亮字体颜色

//------------导航栏配色-------------
.layout .header {
  background-color:@menu-bg-color !important;
  color: @menu-font-color !important;
  height: 52px !important;
  line-height: 52px !important;
}

2，配置setting.js(封装改变less变量的函数)

import { message } from 'ant-design-vue/es';
let lessNodesAppended;

const updateTheme = primaryColor => {
  // 生产环境取消编译
  /* if (process.env.NODE_ENV === 'production') {
    return;
  } */
  function buildIt() {
    // 正确的判定less是否已经加载less.modifyVars可用
    if (!window.less || !window.less.modifyVars) {
      return;
    }
    // less.modifyVars可用，处理参数格式
    let colorData = {}
    primaryColor.map(t=>{
      colorData[t.lessVar] = t.color
    })
    window.less.modifyVars(colorData)  
      .then(() => {
         hideMessage();
      })
      .catch(() => {
        message.error('Failed to update theme');
         hideMessage();
      });
  }
  if (!lessNodesAppended) {
    // insert less.js and color.less
    const lessStyleNode = document.createElement('link');
    const lessConfigNode = document.createElement('script');
    const lessScriptNode = document.createElement('script');
    lessStyleNode.setAttribute('rel', 'stylesheet/less');
    lessStyleNode.setAttribute('href', __webpack_public_path__ + 'color.less')
    lessConfigNode.innerHTML = `
      window.less = {
        async: true,
        env: 'production',
        javascriptEnabled: true
      };
    `;
    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
    lessScriptNode.async = true;
    lessScriptNode.onload = () => {
      buildIt();
      lessScriptNode.onload = null;
    };
    document.body.appendChild(lessStyleNode);
    document.body.appendChild(lessConfigNode);
    document.body.appendChild(lessScriptNode);
    lessNodesAppended = true;
  } else {
    buildIt();
  }
};

export { updateTheme}

3，页面中使用

import { updateTheme } from "@/components/tools/setting";

methods:{
 changecolor(){
    //参数格式
    let setColor = [{lessVar:"@primary-color", color:'#2D2D2D'},
                    {lessVar:"@menu-bg-color", color:'#F4F4F4'}
                    {lessVar:"@menu-font-color", color:'#F4F4F4'}]
    updateTheme(setColor)
}
}