今天利用webpack-theme-color-replacer插件,为ant-design实现了在运行时动态切换主题色的功能,无需在页面进行less的编译,提升了切换速度。有需要的同学可以参考下。
源码:https://github.com/hzsrc/ant-...
效果预览:https://deploy-preview-4289--...
在右侧中央的配置按钮点开可以切换主题色。
实现方案:
方案是统一的,见之前的文章:https://segmentfault.com/a/11...
基本步骤:
基于 ant-design-pro 这个项目上进行修改:
1、webpack加入插件配置:查看修改:
https://github.com/hzsrc/ant-...
2、运行时动态切换主题色,查看修改:
https://github.com/hzsrc/ant-...
(因笔者时间有限,color.less
文件中的colorPalette
变换函数所涉及的颜色值没有纳入)
实现效果:
初始主题色:
切换后主题色: