Change Ion-Tabs color

Hi, I’m trying to change <ion-tabs> color. I have this

<ion-tabs color="primary">

But I want to put dynamic value, like <ion-tabs color="{{color}}">

And in my Component:

this.color = "#333131"

(imagine I initialize this.color with a value received from backend, to change the colors dynamically).


You could do something like this.




You could follow ionic theming and add the wanted variable right into the color="mynewcolor" template:

// src/theme/variables.scss
$colors: (
    mynewcolor: #333131
// in your template
<ion-tabs color="mynewcolor">
1 Like

I tried this, but any of both works :confused:

That would be fine if I wanted ever the same color (#333131), but I want to make the value dynamic. :dizzy_face:

Ahh I see. then @philipgriffin’s approach seems to be the right way to go.

did you bind the variable to the component? if you just add <div>{{myDynamicColor}}</div> to your template, does it say #311313?

Yes, I’m catching the value from the component correctly, but apparently [style.color] and [style.background] doesn’t work with <ion-tabs> tag …

You can add this class to the ion-tabs

.red {
    tabbar {
    background-color: red;

like so…

<ion-tabs class="red">

You chould then make that class name a variable

<ion-tabs class="myVar">

and add more css…

.red {
    tabbar {
    background-color: red;

    tabbar {
    background-color: green;

then change that myVar to be red or green or something else.

Alternatively you could just edit the css class ‘.tabbar’ and change the background color programtically with javascript.

1 Like