react+antDesign+antd-theme-generator实现线上主题换肤功能


项目架构

create-react-app + antDesign + redux

说明

公司需要开发一个线上换肤功能,考虑复杂性,还是觉得通过插件可以直接改变antDesign的primary值,实现改一个颜色就能全局更换antDesign组件的颜色这里使用antd-theme-generator实现
`亲测有效

安装

antd-theme-generator

`需要配合less使用

目录

根目录添加color.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const path = require('path');
const { generateTheme } = require('antd-theme-generator');

const options = {
  stylesDir: path.join(__dirname, './src/styles'),
  antDir: path.join(__dirname, './node_modules/antd'),
  varFile: path.join(__dirname, './src/styles/variables.less'),
  mainLessFile: path.join(__dirname, './src/styles/index.less'),
  themeVariables: [
    //需要动态切换的主题变量
    '@primary-color',
    '@secondary-color',
    '@text-color',
    '@text-color-secondary',
    '@heading-color',
    '@layout-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);
  });

src文件夹下添加style/index.less+style/variables.less

index.less文件为空

variables.less文件

1
2
3
4
5
6
7
@import '~antd/lib/style/themes/default.less'; //引入antd的变量文件，实现变量的覆盖

@primary-color: '#202777';
@layout-header-padding: '0px';
:root {
--PC: @primary-color;
}

index.html文件中加入全局less配置

index.html 中加入全局 less 变量配置，\b从而使 less 的 modifyVars 方法可以全局使用，切换主题时覆盖 default.less 中的变量：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <body>
    <link
      rel="stylesheet/less"
      type="text/css"
      href="%PUBLIC_URL%/color.less"
      rel="external nofollow"
    />
    <script>
      window.less = {
        async: false,
        env: 'production'
      };
    </script>
    <script
      type="text/javascript"
      src="//i1.wp.com/cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"
    ></script>
    <div id="root" style="height: 100%;"></div>
  </body>

package.json文件修改命令

1
2
3
4
5
"scripts": {
 "start": "node color && node scripts/start.js",
 "build": "node color && node scripts/build.js",
 "test": " node color && node scripts/test.js"
},

切换方法

改变@primary-color的色值切换主题颜色,在这可以storage存色值,切换页面的时可以先调用这个方法实现

1
2
3
4
5
6
7
8
9
10
11
12
13
  getTheme = data => {
    window.less
      .modifyVars({
        '@primary-color': this.state.styleList[data].color,
        '@layout-header-padding': '0px'
      })
      .then(() => {
        this.setState({ style: data });
      })
      .catch(error => {
        console.log(error);
      });
  };