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

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`

缺点：需要配合 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','@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="https://cdnjs.cloudflare.com/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"
},

页面调用方法切换主题

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

 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实现线上主题动态切换功能相关推荐

iOS App主题皮肤切换功能简介和具体实现详解附有源码
分享一个朋友的人工智能教程.比较通俗易懂,风趣幽默,感兴趣的朋友可以去看看. 0.换肤的应用场景一般情况下某些App在节假日(春节.中秋.国庆等)切换主题,显得更适合当下的气氛; 切换白天或夜晚模式 ...
vue3+elementPlus主题动态切换2022，亲测可用！
环境系统: win10 64 node版本 v16.13.2 vue: ^3.2.33 element-plus: ^2.2.0 开始在线预览效果 || git仓库地址本文换肤的实现思路是手动 ...
2021年10月24日马丁加德纳聚会线上主题分享开启通知
早点关注我,精彩不错过! 一年一度的Martin Gardner趣味数学盛会又要在本周末如期而至了!今年MatheMagician会继续参加并带来最新的数学魔术主题分享! 快点收藏会议地址,定好闹钟来 ...
最新功能 | 飞书推出“线上办公室”功能，助力企业开启无压力远程实时高效协作
为解决企业节后远程协作办公痛点,飞书"线上办公室"功能应运而生,"线上办公室"通过实时语音频道的方式,高度还原办公室工作.沟通场景,帮助企业和团队之间提升远程协 ...
【干货分享】如何应对线上数据库的误操作
最近经常遇到开发同学在线上误操作数据,有的是误操作了一张表下的某些数据,还有的是表被删掉了,甚至也有整个库被误删.开发同学遇到这种情况通常是匆匆忙忙的找到DBA,问问有没有补救的办法,这时候DBA则会 ...
飞书推出“线上办公室” 通过实时语音频道还原办公场景
为解决企业远程协作办公痛点,2月2日,字节跳动旗下办公套件飞书宣布推出"线上办公室"功能,通过实时语音频道的方式,高度还原办公室工作.沟通场景,帮助企业和团队之间提升远程协作效率, ...
共话轻应用时代App开发新模式 FinClip线上沙龙成功举办
12月7日,FinClip 联合 Zion 的最新一期线上主题沙龙活动成功举办.本次沙龙以<走进小程序云原生开发新时代>为主题,共话轻应用时代的App开发新模式. 本次线上沙龙邀请到了凡泰 ...
SSM+mysql离散数学线上考试系统-计算机毕业设计源码83059
摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,高校当然也不例外.离散数学线上考试系统是以实际运用为开发背景,运用软件工程原理和开 ...
相亲婚恋小程序，打造线上相亲新模式
春节将至!你是否逢年过节会被询问感情状况?是否随时面临着各种相亲宴会?是否有热衷帮你介绍对象的七大姑八大姨?结果就是与相亲对象面面相觑,无限尬聊,你真的不止是一个人! 今天,想问问大家--家人 ...

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

安装 `antd-theme-generator`

添加主题切换文件 `color.js`

CSS 文件下添加less文件

HTML文件中加入全局less配置

项目启动处修改

页面调用方法切换主题

react实现线上主题动态切换功能相关推荐

最新文章

热门文章

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

安装 antd-theme-generator

添加主题切换文件 color.js

CSS 文件下添加less文件

HTML文件中加入全局less配置

项目启动处修改

页面调用方法切换主题

react实现线上主题动态切换功能相关推荐

最新文章

热门文章

安装 `antd-theme-generator`

添加主题切换文件 `color.js`