I want to change the color of the active tab. I found that the css variable is --color-selected in the component ion-tabbar. This variable is taking the color from var(--ion-tabbar-text-color-active, #488aff). Overriding --ion-tabbar-text-color-active in the :root works.
The problem is when using a theme color, my case primary. This overrides the variable to --color-selected: var(--ion-color-contrast) where color contrast is taken from the ion-color-primary variables.
I just need to change one css variable, but I can’t do it. I’m forced to use it.
How can I tell or where I can add ion-tabbar.ion-color { --color-seleted: var(--ion-tabbar-text-color-active); }
The solution would be to override the --color-selected just for the ion-tabbar element.
I tried adding this after the :root definitions, but it didn’t work.
But because of the new shadow dom this is not applied… You can override it for ion-tab but then the override takes effect on the tab content as well!! Frustrating. There is a hacky way where you can inject your own CSS inside shadow DOM but that is not intended behavior. Ionic should expose a different variable than --ion-color-primary for the primary color or allow us to override ion-tabbar variables (since they want to go down that path)