Ionic5 Vue3修改底部Tabs背景颜色以及按钮颜色

1、ion-tab-bar指定color属性

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

2、自定义主题

.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

下面示例中修改了底部背景和按钮颜色


.ion-color-favorite {
   --ion-color-base: #ffffff;
  --ion-color-base-rgb: 255,255,255;
  --ion-color-contrast: red;
  --ion-color-contrast-rgb: 0,0,0;
  --ion-color-shade: #000000;
  --ion-color-tint: #000000;
}