react实现线上主题动态切换功能
框架选择： create-react-app + mobx + webpack5 + antdesign
说明
由于最近公司有多个主题的共存性，所以需要实现线上主题切换的功能，所以本⽂主要描述的是基于create-react-app之上的主题切换。
CSS切换
有考虑过根据⽤户选择的主题在切换的时候选择加载页⾯css⽂件的区分⽅案，但是考虑到这种形式需要在页⾯切换的时候去reload，因为htmlDOM是在css与JS的结合产物，⽤户体验不是很好。
Less切换
单纯引⼊所有的less⽂件去做切换，这样不能实现css的动态加载了，会增加⽆⽤css⽂件的加载
最后通过⽐较及查询，获取到第三⽅插件：
功能实现原则：使⽤ less 的 modifyVars 完成 antd 的主题变量替换。
安装antd-theme-generator
缺点： 需要配合 LESS v2.7.x 使⽤，不兼容IE。
cnpm install antd-theme-generator -S
添加主题切换⽂件color.js
根⽬录下添加⽂件color.js，添加配置内容：
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',
css变量'@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);
});
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中的变量：
<!-- 使⽤⾃动⽣成的color.less，主要路径与index.html⽂件同级 -->
<link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/color.less" />
<script>
window.less = {
async: false,
env: 'production'
};
</script>
<script type="text/javascript" src="cdnjs.cloudflare/ajax/libs/less.js/2.7.2/less.min.js"></script>
项⽬启动处修改
修改项⽬运⾏配置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"
},
页⾯调⽤⽅法切换主题
页⾯点击主题切换配置，这样写的缘故是因为我配置的变量不同：
difyVars(
{
'@primary-color': '#aaa',
'@menu-dark-item-active-bg':'#aaa',
'@link-color': '#aaa',
'@text-color':'#aaa',
'@btn-primary-bg': '#aaa',
}
)
.then(() => {
message.success('主题切换成功')
})
.catch(error => {
<(`主题切换失败`);
console.log(error)
});
由于之后的配置中新增的样式需要遵循主题配置的可以选择使⽤统⼀变量，所以变量设置的时候，可以添加var(--PC)的全局变量设置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。