CODEWITHSUNDEEP
ionic-frameworksassionic4
Yushin
Yushin

Reputation: 1750

How to change the color of active tab in ionic 4?

I am trying to change the color of the selected tab in ionic 4, but I have faced some challenges. I am using the tabs template. I tried editing it in chrome://inspect and it worked but when I built for android it takes no effect.

What do I need to change?

Upvotes: 2

Views: 5698

Answers (2)

user9088454
user9088454

Reputation: 1122

Just use ion-tab-button CSS custom properties, --color-selected Color of the selected tab button:

 ion-tab-button {
  --color-selected: red;
 }

Ref: ion-tab-button

Upvotes: 4

Cody Burleson
Cody Burleson

Reputation: 123

I thought Ionic 4 was all shadow DOM. I may be wrong, but according to what I've been reading, you have to use CSS variables to get at the shadow-dom styles in Ionic 4. See, for example: https://www.joshmorony.com/a-primer-on-css-4-variables-for-ionic-4/

Upvotes: 3

Related Questions