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