本文介绍了如何在Angular项目中结合ng-zorro实现主题换肤功能。首先按照官方步骤引入ng-zorro，然后详细阐述了创建自定义主题的步骤，包括安装依赖、编写脚本，并解释了如何在入口文件中处理主题样式。特别提到，动态切换主题时需注意给菜单添加主题，以确保覆盖效果。此外，还讨论了@primary-color的误解和如何处理按钮的悬停状态，提供了一种全局CSS的解决方案来实现最优的样式效果。
创建项目
引入ng-zorro
安装官网的步骤走，直到主题切换
这里开始才是真的开始；
1.安装依赖
2.编写脚本
官网写的及其简单，搜罗了大量资料终于有大佬说出这个脚本是在哪里了（出处忘记了，在度娘找到的B站文章）；
入口文件写在项目的根目录下，名称你可以自己取，我的话。。比较懒。。
官网的说法是以暗黑主题为例，如果你用的官方的那么你的modifyVars 参数就可以参照官网来，如果不是请屏蔽掉它。然后在appstyles这个样式你们引入你要的模板样式，然后在添加你想要覆盖的样式，你也可以在modifyVars 中加入你要覆盖的样式，需要覆盖的比较多的话不推荐这种方式；然后在终端或者cmd中运行“node .\theme.js”（theme.js就是是你自己写的文件名称），在你的主题样式输出文件位置就会生成对应的css文件(不要写成less，不然你的样式在本地是不生效的，据说是用打包工具后可以生效不过我么有尝试过)
我引入的是暗黑主题然后在使用覆盖，这样做的目的是有些地方暗黑模式是可以添加不同颜色的，但是其他主题不可以，比如菜单暗黑主题的菜单名称和子项的背景颜色是可以自己修改的，这样会比较明显
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
