const path = require('path');
const { generateTheme, } = require('antd-theme-generator');

const options = {
 stylesDir: path.join(__dirname, './src/css'),
 antDir: path.join(__dirname, './node_modules/antd'),
 varFile: path.join(__dirname, './src/css/variables.less'),
 mainLessFile: path.join(__dirname, './src/css/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);
});

@import "~antd/lib/style/themes/default.less"; //引入antd的变量文件，实现变量的覆盖
@primary-color: #1DA57A;
@link-color: #1DA57A;
@btn-primary-bg:#1DA57A;

<!-- 使用自动生成的color.less，主要路径与index.html文件同级 -->
<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="/UploadFiles/2021-04-02/less.min.js">

项目启动处修改
修改项目运行配置 package.json ，项目运行的同时完成页面color文件的配置




"scripts": {
 "start": "node color && node scripts/start.js",
 "build": "node color && node scripts/build.js",
 "test": " node color && node scripts/test.js"
},


页面调用方法切换主题
页面点击主题切换配置，这样写的缘故是因为我配置的变量不同：




window.less.modifyVars(
 {
  '@primary-color': '#aaa',
  '@menu-dark-item-active-bg':'#aaa',
  '@link-color': '#aaa',
  '@text-color':'#aaa',
  '@btn-primary-bg': '#aaa',
 }
)
.then(() => { 
 message.success('主题切换成功')
})
.catch(error => {
 message.error(`主题切换失败`);
 console.log(error)
});


由于之后的配置中新增的样式需要遵循主题配置的可以选择使用统一变量，所以变量设置的时候，可以添加 var(--PC) 的全局变量设置
总结
以上所述是小编给大家介绍的react实现antd线上主题动态切换功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！