Ant design vue动态主题切换的坑与一般性方法

本文原创，并且以吐槽为主，下面开始：

Ant design vue是很优秀的框架，不过对于一般小白用户（比如我），文档方面不够友好。官方给出了主题自定义色彩的方案，但是太过于简陋，网上很多技术解决方案也点到即止，我在这方面足足浪费了两天时间，下面说一下技术重点，每个点都是自己踩出来的坑，都是泪：

先说下需要的各个模块以及版本号，这个很重要，版本号不对，就会有各种你搜都搜不出解决方案的报错

【以下内容均针对vue cli3/4初始化的项目环境，其他方案请自行解决】

Vue@2.6.11
Ant-design-vue@1.7.4
less@2.7.3
less-loader@4.1.0 //这个应该在7.x及以下版本都可以，不要再高了

antd-theme-generator@1.2.8 //这个是主题切换的主要module

上面的module，特别需要注意的是antd-theme-generator如果是用1.2.8版本，则需要在【node-modules/ant-design-vue/lib/style/themes/default.less】文件中添加下面内容，否则会报LessError: error evaluating function darken: color.toHSL is not a function错误，less无法生成，我在这里卡了很久……

@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-selection-column-width: 60px;

如果不想改module文件，可以把antd-theme-generator降级到1.2.5版本。

截至2021年3月，个人不推荐上vue3和ant design vue2.x版本，主要原因是因为如果你在项目中要应用其他modules的时候，很多支持不够好，可能会跑不起来

下面进入具体步骤，个别地方与网上一大抄的文章不太一样：

1、新建themer.js在【项目根目录】，内容如下：

const path = require("path");
const { generateTheme, getLessVars } = require("antd-theme-generator");
// ant-design-vue/dist/antd.less
const options = {
  antDir: path.join(__dirname, "./node_modules/ant-design-vue"), //对应具体位置
  stylesDir: path.join(__dirname, "./src/assets/theme"), //对应具体位置
  varFile: path.join(__dirname, "./src/assets/theme/var.less"), //对应具体位置
  mainLessFile: path.join(__dirname, "./src/assets/theme/index.less"), //对应具体位置
  themeVariables: [
    "@primary-color",
    "@secondary-color",
    "@text-color",
    "@text-color-secondary",
    "@heading-color",
    "@layout-body-background",
    "@btn-primary-bg",
    "@layout-header-background",
    "@body-background",
  ],
  indexFileName: "index.html",
  outputFilePath: path.join(__dirname, "./public/color.less"),
};
generateTheme(options)
  .then((less) => {
    console.log("Theme generated successfully");
  })
  .catch((error) => {
    console.log("Error", error);
  });

2、在项目目录【src/assets】下新建theme目录以及index.less和var.less两个文件用来生成需要的css，其中index.less为空即可，当然也可以直接把一些less变量写死在里面，然后var.less里放置你想要动态修改的变量，比如：

@import "~ant-design-vue/lib/style/themes/default.less";
@link-color: #00375b;
@primary-color: rgb(138, 164, 182);
@body-background: #222;

3、修改package.json中的生成语句中，添加【node themer】命令，比如我的是：

"scripts": {
    "dev": "node themer & vue-cli-service electron:serve"
},

意思就是在编译的时候，生成color.less到public文件夹内供调用

4、修改你的vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {},
          javascriptEnabled: true,
        },
      },
    },
  },
};

5、在你的Vue文件中，添加以下方法：

btnclick(color) {
    this.color = color;
    this.changeTheme();
},
changeTheme() {
  window.less
    .modifyVars({
      "@primary-color": this.color,
      "@link-color": this.color,
      "@btn-primary-bg": this.color,
      "@body-background": this.color,
    })
    .then(() => {
      console.log("成功");
    })
    .catch((error) => {
      alert("失败");
      console.log(error);
    });
}

6、在【public/index.html】的</body>之前，添加以下代码：

<link rel="stylesheet/less" type="text/css" href="/color.less" />
    <script>
        window.less = {
          async: false,
          env: 'production'
        };
   </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

这样，就把页面的css内容直接动态替换掉了。我的项目中会使用到dark主题，其实就是替换掉其中的核心less变量即可，等做好了单独写文章记录具体的色值和变量。