超级会员免费看
本文探讨了前端在线切换和自定义换肤的研究与实现，分析了市面上现有方案的局限性，并介绍了基于webpack、less/scss的实现方式。通过动态替换颜色值和利用Ant Design色彩算法，实现了更灵活的主题切换，减少了后期定制的繁琐工作。
一个基于在线切换和自定义的实现的换肤研究和实现
前言
市面上有好多在线切换主题的方式，但是我个人感觉不是那么的完美，感觉有实现上只是表面的上一些简单的变化，都是借助webpack + less/scss的实现。最近在做UI组件库的一些事情，对在线换肤的一点方式实现，一下只是个人的一点想法，仅仅只代表个人。
市面上的分析
- 可供选择的换肤
这种方式限制性太强，也就是针对性，在产品发布之前定义好几套主题，然后打包到生产环境中，想要超出之外要么重新定制一套出来，之后打包发布，很麻烦！Element-UI上提供在线定义颜色，编译之后生成主题，之后集成到环境中。方便，但是有点麻烦。这个思路也就是通过js动态link 不同的主题包
-
动态色值换肤
a).全局替换颜色值
elemnt-ui Admin(https://elementui.github.io/theme-preview/#/zh-CN),先把样式中颜色全部替换后在塞到
elementUI和 Ant Design 实现对比
a).elementUI实现思路
1. 先把默认主题文件中涉及到颜色的 CSS 值替换成关
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
