antd动态主题;在线换肤

最简单的react+antd在线换肤功能

  • 开始
    • 下载插件
    • 准备
      • 根目录添加color.js
      • src文件夹下添加styles/index.less+styles/variables.less
      • index.html文件中加入全局less配置
      • package.json文件修改命令
    • 大功告成

开始

目前项目中有一个换肤的功能,在csdn苦苦搜寻许久没有找到合适的方案,可能是版本问题或是别的什么导致各种报错,最终在antd社区找到了一个可施行的方案,在此做下笔记

下载插件

yarn add antd-theme-generator

准备

根目录添加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文件夹下添加styles/index.less+styles/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 && react-scripts start",
 	"build": "node color && react-scripts start",
	"test": " node color && react-scripts start"
},

大功告成

这样就可以动态的修改了!

getTheme = color => {
    window.less
      .modifyVars({
        '@primary-color': color,
        '@layout-header-padding': '0px'
      })
      .then(() => {
        consolr.log(color);
      })
      .catch(error => {
        console.log(error);
      });
  };

你可能感兴趣的:(js,reactjs,less,ant-design,demo)