Change Ion-Tabs color

Ionic Framework ionic-v3
1

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).

Thanks.

2

You could do something like this.

[style.color]="myDynamicColor"

Or

[style.backgroundColor]="myDynamicColor"

3

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
4

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

5

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

6

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?

8

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

9

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;
  }
}

.green{
    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