ionic4自定义底部tabs菜单背景颜色以及按钮颜色

Ionic4.x修改主题颜色的话需要在src/theme/variables.scss文件中修改。自定义底部tabs菜单背景颜色以及按钮颜色的话我们需要找到src/theme/variables.scss,然后在里面自定义背景按钮颜色。


官方文档: https://ionicframework.com/docs/theming/advanced



1、ionic4.x自定义底部tabs菜单背景颜色以及按钮颜色第一步:


找到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;
}
其中的 --ion-color-base 为主颜色 ,--ion-color-contrast为对照颜色。

用在底部tabs菜单中的话 ion-color-base为背景颜色,ion-color-contrast为图标和文字颜色。比如底部tabs的颜色是#69bb7b 则里面按钮的颜色是#ffffff


2、ionic4.x自定义底部tabs菜单背景颜色以及按钮颜色第二步:


在 ion-tabs中的ion-tab-bar上面绑定颜色


<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>