如何在 ionic 中更改 tabsHighlight 的颜色答案

【问题标题】：How to change the color of tabsHighlight in ionic如何在 ionic 中更改 tabsHighlight 的颜色
【发布时间】：2018-11-14 09:42:13
【问题描述】：

我有一个 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;

【问题讨论】：

标签： html colors tabs ionic3 highlight

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：