使用less实现vue项目的主题切换

1.在vue.config.js配置less

modifyVars里面可以定义多个变量

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
            /* less 变量覆盖，用于自定义主题 */
            'primary-color': '#338DDE',
            'handle-color': '#338DDE'
        },
        javascriptEnabled: true
      }
    }
  }

2.在项目的public目录创建less.min.js和theme.less

less.min.js直接找官方网站下载，也可以在CDN网站上搜less

theme.less里面

1、初始化变量
2、重置页面样式的css代码(注意：配置的变量不能用在其他地方)

@primary-color: #338DDE;
@handle-color: #338DDE;
body{
	background-color: @primary-color!important;
	color: @handle-color!important;
}

3.在html文件里面引入less.min.js和theme.less

因为后面需要用的window.less的方法

<link rel="stylesheet" href="<%= BASE_URL %>color.less">
<script type="text/javascript" src="<%= BASE_URL %>less.min.js"></script>

4.在项目某处创建setting.js文件

我只用到了updateTheme方法，参数根据你的变量来定

let lessNodesAppended;
const updateTheme = (primaryColor,handleColor) => {
  // Determine if the component is remounted
  if (!primaryColor || !handleColor) {
    return;
  }
  console.info(`正在编译主题!`)
  function buildIt() {
    // 正确的判定less是否已经加载less.modifyVars可用
    if (!window.less || !window.less.modifyVars) {
      return;
    }
    // less.modifyVars可用
    window.less.modifyVars({
      '@primary-color': primaryColor,
      '@handle-color': handleColor,
    })
    .then(() => {
      console.log('主题更改成功');
    })
    .catch(() => {
      console.log('主题更改失败');
    });
  }
  if (!lessNodesAppended) {
    const lessStyleNode = document.createElement('link');
    const lessConfigNode = document.createElement('script');
    const lessScriptNode = document.createElement('script');
    lessStyleNode.setAttribute('rel', 'stylesheet/less');
    lessStyleNode.setAttribute('href', process.env.BASE_URL +'theme.less');
    console.log(process.env.BASE_URL);
    lessConfigNode.innerHTML = `
      window.less = {
        async: true,
        env: 'production',
        javascriptEnabled: true
      };
    `;
    lessScriptNode.src = process.env.BASE_URL +'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();
  }
};

const updateColorWeak = colorWeak => {
  // document.body.className = colorWeak ? 'colorWeak' : '';
  colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
};

export { updateTheme, updateColorWeak }

5.引入setting.js的updateTheme方法，就可以修改配置里的主题变量了

import { updateTheme } from '@/utils/setting'

updateTheme('red','yellow')