react+antDesign+antd-theme-generator实现线上主题换肤功能项目架构create-rea

项目架构

create-react-app + antDesign + redux

说明

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

安装

antd-theme-generator

`需要配合less使用

根目录添加color.js

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文件

@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 变量配置，从而使 less 的 modifyVars 方法可以全局使用，切换主题时覆盖 default.less 中的变量：

 <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="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"
    ></script>
    <div id="root" style="height: 100%;"></div>
  </body>

package.json文件修改命令

"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存色值,切换页面的时可以先调用这个方法实现

  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);
      });
  };