Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色

1、Ionic4.x Theming(主题)

 

Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改。

 

https://ionicframework.com/docs/theming/advanced

 

2、Ionic4.x 增加内置主题颜色

 

找到 src/theme/variables.scss 文件，如下代码新增 favorite 颜色

 

.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; 
}

 

用法

<ion-button color="favorite">
自定义颜色
</ion-button>

3、修改内置组件默认样式

官方文档:https://ionicframework.com/docs/api/button

在 ionic4.x 组件中有 CSS Custom Properties。我们可以通过 CSS Custom Properties 提供的样式 来修改 ionic4.x 内置组件的默认样式。

找到 src/theme/variables.scss 文件修改 ion-button 的默认样式。

ion-button {
--color: #222; --background:red;
}

4、修改底部 Tabs 背景颜色以及按钮颜色

<ion-tabs>
<ion-tab-bar slot="bottom" color="favorite">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon> <ion-label>Tab One</ion-label>
</ion-tab-button> <ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>Tab Two</ion-label> </ion-tab-button>
</ion-tab-bar> </ion-tabs>

.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;
}

 

contrast 对比色，比如底部 tabs 的颜色是#69bb7b 则里面按钮的颜色是#ffffff