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

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

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

1、ionic5.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、ionic5.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>

这就是ionic5自定义底部tabs菜单背景颜色以及按钮颜色的使用方法,ionic5自定义底部tabs菜单背景颜色以及按钮颜色就给大家先介绍到这里，希望对你有帮助

更多ionic5自定义底部tabs菜单背景颜色以及按钮颜色的使用教程：https://www.itying.com/goods-1067.html