如何更改离子中tabsHighlight的颜色

Question

我有一个 iontabs，我想在它激活时更改突出显示

这里是html的代码：

<ion-tabs mode="md" tabsPlacement="top" tabsHighlight="true" tabsLayout="icon-start">
    <ion-tab [root]="tab1Root" tabBadge="" tabBadgeStyle="" tabTitle="TODAY" tabIcon="ios-star" ></ion-tab>
</ion-tabs>

这里是我的 css 代码（我只能更改文本和图标颜色）：

$tabs-md-tab-text-color-active: #000;
$tabs-md-tab-icon-color-active: #000;
$tabs-md-tab-highlight-color-active: #000;

Answer 1

不幸的是，覆盖选项卡突出显示的离子变量（来自 https://ionicframework.com/docs/theming/overriding-ionic-variables/）不起作用。

这里还有一个关于更改活动选项卡背景颜色的帖子： https://forum.ionicframework.com/t/changing-tab-color-in-ionic/39457/15

您可以将其添加到您的 app.scss 中

.tabs-md .tab-button[aria-selected=true] {
  background: #000;
}

Answer 2

可以使用 Sass 变量更改选项卡颜色。有关主题主题的一些示例，请参阅会议应用程序：

https://github.com/driftyco/ionic-conference-app/tree/master/src/theme

如何更改离子中tabsHighlight的颜色

How to change the color of tabsHighlight in ionic

html

tabs

colors

highlight

ionic3