angular+ng-zorror主题换肤

创建项目

引入ng-zorro

安装官网的步骤走，直到主题切换

这里开始才是真的开始；

1.安装依赖

2.编写脚本

官网写的及其简单，搜罗了大量资料终于有大佬说出这个脚本是在哪里了（出处忘记了，在度娘找到的B站文章）；

入口文件写在项目的根目录下，名称你可以自己取，我的话。。比较懒。。

官网的说法是以暗黑主题为例，如果你用的官方的那么你的modifyVars 参数就可以参照官网来，如果不是请屏蔽掉它。然后在appstyles这个样式你们引入你要的模板样式，然后在添加你想要覆盖的样式，你也可以在modifyVars 中加入你要覆盖的样式，需要覆盖的比较多的话不推荐这种方式；然后在终端或者cmd中运行“node .\theme.js”（theme.js就是是你自己写的文件名称），在你的主题样式输出文件位置就会生成对应的css文件(不要写成less，不然你的样式在本地是不生效的，据说是用打包工具后可以生效不过我么有尝试过)

我引入的是暗黑主题然后在使用覆盖，这样做的目的是有些地方暗黑模式是可以添加不同颜色的，但是其他主题不可以，比如菜单暗黑主题的菜单名称和子项的背景颜色是可以自己修改的，这样会比较明显区分菜单

另一个需要注意的地方就是在动态切换主题的时候，记得给菜单添加主题，只能是默认的两种，否则在使用自定义颜色覆盖的时候菜单颜色覆盖会不生效（不用担心使用dark时候不是我们自定义的颜色，因为我们已经覆盖过了）

----------------------------------------------------更新------------------------------------------------

这两个色是可以不一样的，我最开始以为@primary-color就是主题色，其实不是的，这个最直观的体现是按钮上，鼠标悬停颜色以及点击时候水波纹的颜色，如果你的颜色和主题色一样的话按钮就会看不清字体颜色了，或者你的按钮你改了颜色你鼠标悬停时候还是会看不清按钮字体,

---------------------更新------------------------

如果你的@primary-color为了配合悬停改变的话，你的普通按钮就会变成背景色是@primary-color;最好的办法大概还是重写这个悬停的样式。。想哭，弄不懂官方的想法;

最后发现其实它是通过这个位置来改变的，这个就是你按钮的悬停的字体或者背景颜色，但是比写的颜色要浅一些

这样的话就只用单独写primary这个按钮的样式,经过测试最终找到了个人认为的最优方式

增加全局css

::ng-deep .green {

.ant-btn-primary:focus, .ant-btn-primary:hover{

background: #bde1c2;

border-color: #bde1c2;

}

.ant-btn:focus, .ant-btn:hover{

background: #bde1c2;

border-color: #bde1c2;

color: black;

}

.green是我的绿色主题，里面就是添加的按钮自定义样式；多个主题色可以添加多个样式通过不同的主题名称区分

红色部分是添加多个动态class，黄色的theme代表是当前选中的主题色

angular+ng-zorror主题换肤相关推荐

android view设置按钮颜色_Android 主题换肤技术方案分析
写在前面 Android TV 电视开发,主题换肤,我感觉有两种层级的方式,一种是系统级,另一种是应用级, 我记得很早在 Linux 桌面开发的时候,我们之前的公司在GTK+上也实现了一套换肤UI ...
Android主题换肤实现
本系列文章主要是对一个Material Design的APP的深度解析,主要包括以下内容基于Material Design Support Library作为项目整体框架.对应博文:Android ...
Element UI主题换肤功能(基于vue-element-admin框架)
环境信息: 日期:2022-08-05 node版本:v14.15.4 "sass": "1.26.8", "sass-loader": & ...
Android 主题换肤技术方案分析
写在前面 Android TV 电视开发,主题换肤,我感觉有两种层级的方式,一种是系统级,另一种是应用级, 我记得很早在 Linux 桌面开发的时候,我们之前的公司在GTK+上也实现了一套换肤UI ...
Android主题换肤无缝切换
作者 _SOLID 关注 2016.04.17 22:04* 字数 4291 阅读 23224评论 123喜欢 679 今天再给大家带来一篇干货. Android的主题换肤 ,可插件化提供皮肤包,无需 ...
Android 主题换肤的开源库
Android 主题换肤的开源库(插件化换肤) 新增夜间模式的简洁实现方式,不需要再去单独创建一个皮肤包(目前处于beta版本) 夜间模式实现方式前提条件还是每个使用到的资源必须是引用的,不能是具体 ...
Android主题换肤无缝切换你值得拥有
链接:https://www.jianshu.com/p/af7c0585dd5b 天再给大家带来一篇干货. Android的主题换肤 ,可插件化提供皮肤包,无需Activity的重启直接实现无缝切换 ...
基于element-ui的主题换肤
今天分享的是基于element-ui的主题换肤功能需求效果如动图: 需求描述:根据客户的个人喜好,切换不同颜色风格的主题. 关键点1:在element-ui官方去配置主题颜色并且下载对应的文件,一 ...
Element-ui自定义主题换肤
在使用Element-ui进行项目开发时,我们会想把那个饿了么的天蓝色换成自己项目的主题色,那如何在自己的项目中实现换肤耶,我这次用的是使用命令行主题工具生成css文件的方式换肤 1. 用vue- ...
根据域名实现前端主题换肤的解决方案
大致思路:根据域名去选择加载哪一个css文件,,先定义主题variable.less供模块中引用,使用less变量覆盖的形式,实现换肤. 1. variable.less 2. index.js 3. ...

angular+ng-zorror主题换肤

angular+ng-zorror主题换肤相关推荐

最新文章

热门文章