ant-design-vue实现动态切换主题色

一、使用的插件版本1、“ant-design-vue” 不限版本注意：ant-design-vue是基于babel-plugin-import按需引入的，在根目录下建了babel.config.js内容如下module.exports = {presets: ['@vue/cli-plugin-babel/preset',],env: {development: {plugins: ['dynam

miss-f

3923人浏览 · 2021-03-29 15:03:10

miss-f · 2021-03-29 15:03:10 发布

一、使用的插件版本

1、“ant-design-vue” 不限版本

注意：ant-design-vue是基于babel-plugin-import按需引入的，在根目录下建了babel.config.js内容如下

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  env: {
    development: {
      plugins: ['dynamic-import-node'],
    },
  },
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  ],
}

2、 "antd-theme-generator": "^1.2.5" 更换主题的核心插件

特别需要注意的是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版本。

3、 "less": "^2.7.3", "less-loader": "^5.0.0" 因为ant-design-vue是依赖于less进行开发因此安装less和less-loader

二、具体配置

1、在public文件夹下的index.html中加入注释ant design vue切换主题色下面的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <div id="app">   
	</div>
  <!-- ant design vue切换主题色 -->
  <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>
  </body>
</html>

并建一个空的color.less文件，后面通过node color生成对应的less

2、在根目录下建一个color.js内容如下

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

3、根据color.js中引入的styles下面的文件我们需要在src/assets/styles下面建一个theme文件夹（可以根据个人习惯建文件夹）里面有【index.less,variables.less，】index.less的内容为空。主要的是variables.less，它的内容如下

@import "~ant-design-vue/lib/style/themes/default.less";
@link-color: #00375B;
@primary-color: rgb(138, 164, 182);
:root {
    --PC: @primary-color; 
 }
.primary-color{
  color:@primary-color
}

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

"serve": "node color && vue-cli-service serve",
 "build": "node color && vue-cli-service build",
 "build:stage": "node color && vue-cli-service build --mode staging",

只要启动项目就会在public的color.less生成颜色样式

走到这儿动态切换主题色已经可以实现了----（若有问题，欢迎留言）

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^