react实现antd线上主题动态切换功能

2023-08-17 19:30:04 340

demo

框架选择：create-react-app+mobx+webpack5+antdesign

说明

由于最近公司有多个主题的共存性，所以需要实现线上主题切换的功能，所以本文主要描述的是基于create-react-app之上的主题切换。
CSS切换有考虑过根据用户选择的主题在切换的时候选择加载页面css文件的区分方案，但是考虑到这种形式需要在页面切换的时候去reload，因为htmlDOM是在css与JS的结合产物，用户体验不是很好。
Less切换单纯引入所有的less文件去做切换，这样不能实现css的动态加载了，会增加无用css文件的加载
最后通过比较及查询，获取到第三方插件：antd-theme-generator
功能实现原则：使用less的modifyVars完成antd的主题变量替换。

安装

antd-theme-generator

缺点：需要配合 LESSv2.7.x使用，不兼容IE。

cnpminstallantd-theme-generator-S

添加主题切换文件 color.js

根目录下添加文件 color.js，添加配置内容：

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

constoptions={
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('Themegeneratedsuccessfully');
})
.catch(error=>{
console.log('Error',error);
});

CSS文件下添加less文件

添加 variables.less文件：

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

HTML文件中加入全局less配置

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

项目启动处修改

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

"scripts":{
"start":"nodecolor&&nodescripts/start.js",
"build":"nodecolor&&nodescripts/build.js",
"test":"nodecolor&&nodescripts/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线上主题动态切换功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

react实现antd线上主题动态切换功能

热门推荐

随机推荐