ionic 修改组件默认样式_Ionic4自定义组件颜色以及扩展默认颜色

最新推荐文章于 2021-04-24 09:47:09 发布

weixin_39685762

最新推荐文章于 2021-04-24 09:47:09 发布

阅读量295

点赞数

文章标签： ionic 修改组件默认样式

本文链接：https://blog.csdn.net/weixin_39685762/article/details/111742050

版权

Ionic4中给我们内置了一些颜色primary #3880ff ，secondary #0cd1e8，tertiary #7044ff ，success #10dc60 ，warning #ffce00 ,danger #f04141, dark #222428 ,medium #989aa2 ,light #f4f5f8。但是这些颜色在特殊项目中是不够用的。下面给大家说下如何扩展ionic4内置颜色。

比如我们现在要新增一个 favorite ##69bb7b 的颜色来扩展Ionic4默认颜色：

1、找到项目根目录src/theme/variables.scss 然后加入下面样式。注意命名

.ion-color-favorite {

--ion-color-base: #69bb7b;

--ion-color-base-rgb: 105,187,123;

--ion-color-contrast: #ffffff;

--ion-color-contrast-rgb: 255,255,255;

--ion-color-shade: #5ca56c;

--ion-color-tint: #78c288;

}

调用自定义颜色的按钮