Changing tab color in Ionic


#1

Sorry for such a basic question, but I’m having trouble changing the color of the tabs in Ionic 2. In many screenshots, I’ve seen the tabs colored such that the tab background color uses the primary color and the text inside uses a white color, but when I’ve tried implementing them, it’s always the reverse; the background is light grey and the text is the primary color. In the API, I’ve noticed the tabbar-style attribute, but try as I might, I can’t seem to get the tabs to use the primary color for the background. Thank you in advance!


#2

This is currently not working, we broke it with a recent release. :grin:

I created an issue for it and I should be able to work on it today:

https://github.com/driftyco/ionic2/issues/776


#3

Hi @brandyshea I couldn’t figure it out if this issue was fixed or not as the link points to a 404 page. Anyways, I’m trying to find out how to change the background color in a tab bar and also the icon and text colors. See sample image


#4

Hi @brandyshea. Is this issue resolved now?


#5

The tab colors can be changed using Sass variables. See the conference app for some example theming: https://github.com/driftyco/ionic-conference-app/tree/master/src/theme

In variables.scss:

// Use the primary color as the background for the toolbar-md-background
$toolbar-md-background:                   color($colors, primary);

// Use the default background for the tabbar since it inherits from toolbar
$tabbar-md-background:                    #f8f8f8;

// Change the color of the tabs text
$tab-button-md-active-color:              color($colors, primary);
$tab-button-md-inactive-color:            #8c8c8c;

// Change the color of the segment button text
$toolbar-md-active-color:                 #fff;
$toolbar-md-inactive-color:               #fff;
$segment-button-md-text-color-activated:  #fff;

All of the available Sass variables can be looked up here:

I plan to improve the documentation behind theming as part of this issue:


#6

Thanks for the reply. But is there any way to achieve this using inline styles in html? I want to change the color using ts variable.


#7

Right now you can use something similar to this and set the color:

<ion-tabs [selectedIndex]="mySelectedIndex" [attr.secondary]="isSecondary">

However, this requires knowledge of the name of the color. Is this what you mean?


#8

@brandyshea, I want to change my tabs color from the json response. I tried the above code but i couldn’t see change in color. Is there any example available for this? PLease help


#9

Could you paste some of the code you’re using? What does the json response look like?


#10

Sure @brandyshea . My ts:

setTheme(){
this.colorSer.getPrimColor().subscribe(data => {
this.primColor = data[0].primColor;
console.log("App/Home: color is ", this.primColor);
});
}

My HTML for menu button (this works):
<ion-navbar *navbar>
<button menuToggle [style.color]="primColor">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title> Getting Started</ion-title>
</ion-navbar>

I want to do the same for tabs button background and tabs icon. But it is not working. Please let me know if you are expecting any other information


#11

the $toolbar-md-background is the area above the tab items, right? I changed this to “red” for instance and is still white.

If I look into the HTML, what is rendered is ion-navbar-section and not a toolbar.


#12

Hi, I’m trying to change the tabs text/icons color by adding this line:

$tab-button-ios-active-color: color($colors, myColor);

to ‘app.ios.scss’, but it doesn’t seem to be working. Am I missing anything?

Thanks!


#13

It doesn’t work for me too:

$tab-button-md-active-color: color($colors, dark);

Added this line to app.variables.scss, but tabs color text didn’t change. I’m working with beta 11.


#14

I tried also override font size:

$tabs-md-tab-font-size: 1.5em;

But this also doesn’t seem to be working.

Any ideas on how to style tabs text would be highly appreciated.

Thanks.


#15

Those variables have been renamed in the most recent releases.

For a searchable list of all Sass variables, check the documentation here:

And for the Sass variables related to a component (with descriptions), check the component’s API page:

Some of the components do not have the Sass variables documented yet, see this issue for more info: https://github.com/driftyco/ionic/issues/8785

Make sure you are settings the variables prior to the import for the ionic theme here:

@import "ionic.theme.default";

Take a look at the conference app for some examples of overriding Tab’s Sass variables:

Please keep in mind this will override the default tab colors, but if you add a color attribute to the tabs component that will take precedence. :slight_smile:


#16

Thanks for your reply @brandyshea.

Per your advise I changed the names of the variables:

$tabs-md-tab-color-active:                color($colors, dark);
$tabs-md-tab-color:                       color($colors, dark); 

Unfortunately it still doesn’t work for me.


#17

Ah I just realized you said you were using beta.11. There have been a lot of changes to theming since then, but I believe the beta 11 way to update the variables can be found here:

If that still doesn’t work, please share a repo or something that we can use to reproduce this. Thank you! :slight_smile:


#18

can we change the tabs color dynamically?


#19

You can using the color input on the component itself. For example:

<ion-tabs [color]="isAndroid ? 'danger' : 'secondary'">
  <ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark" [root]="root"></ion-tab>
  <ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
  <ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
</ion-tabs>

You can use any expression you’d like there, but the string it evaluates to must be a predefined color in the Sass color map.


#20

Is there a way to change the active color of only one tab icon. So for example 4 tabs with 4 different active colors tab1 is blue tab 2 is red tab 3 is green tab 4 is magenta.