Add background color to ion-tabs

Ionic Framework ionic-v3
1

I am using ionic-v4 and I created an ionic tabs page app for navigation. What I want to do now is add a background-color to my ion-tabs but nothing I tried is working. Here is my code

<ion-tabs class="tabs-color-active">
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="information-circle" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="contacts" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
/** Ionic CSS Variables **/
:root {
    
    /** primary **/
    --ion-color-primary: #3880ff;
    --ion-color-primary-rgb: 56,128,255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255,255,255;
    --ion-color-primary-shade: #3171e0;
    --ion-color-primary-tint: #4c8dff;
    /** secondary **/
    --ion-color-secondary: #0cd1e8;
    --ion-color-secondary-rgb: 12,209,232;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255,255,255;
    --ion-color-secondary-shade: #0bb8cc;
    --ion-color-secondary-tint: #24d6ea;
    /** tertiary **/
    --ion-color-tertiary: #7044ff;
    --ion-color-tertiary-rgb: 112,68,255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255,255,255;
    --ion-color-tertiary-shade: #633ce0;
    --ion-color-tertiary-tint: #7e57ff;
    /** success **/
    --ion-color-success: #10dc60;
    --ion-color-success-rgb: 16,220,96;
    --ion-color-success-contrast: #ffffff;
    --ion-color-success-contrast-rgb: 255,255,255;
    --ion-color-success-shade: #0ec254;
    --ion-color-success-tint: #28e070;
    /** warning **/
    --ion-color-warning: #ffce00;
    --ion-color-warning-rgb: 255,206,0;
    --ion-color-warning-contrast: #ffffff;
    --ion-color-warning-contrast-rgb: 255,255,255;
    --ion-color-warning-shade: #e0b500;
    --ion-color-warning-tint: #ffd31a;
    /** danger **/
    --ion-color-danger: #f04141;
    --ion-color-danger-rgb: 245,61,61;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255,255,255;
    --ion-color-danger-shade: #d33939;
    --ion-color-danger-tint: #f25454;
    /** dark **/
    --ion-color-dark: #222428;
    --ion-color-dark-rgb: 34,34,34;
    --ion-color-dark-contrast: #ffffff;
    --ion-color-dark-contrast-rgb: 255,255,255;
    --ion-color-dark-shade: #1e2023;
    --ion-color-dark-tint: #383a3e;
    /** medium **/
    --ion-color-medium: #205532;
    --ion-color-medium-rgb: 152,154,162;
    --ion-color-medium-contrast: #ffffff;
    --ion-color-medium-contrast-rgb: 255,255,255;
    --ion-color-medium-shade: #86888f;
    --ion-color-medium-tint: #a2a4ab;
    /** light **/
    --ion-color-light: #f4f5f8;
    --ion-color-light-rgb: 244,244,244;
    --ion-color-light-contrast: #000000;
    --ion-color-light-contrast-rgb: 0,0,0;
    --ion-color-light-shade: #d7d8da;
    --ion-color-light-tint: #f5f6f9;
}
2

Set the color on the ion-tab, like this:

<ion-tabs color="primary">

That color is defined in the variables.scss file, so you are not locked into the Ionic blue.

3

I updated my code because I forgot to upload the code but I tried this and It surprisingly didn’t work. I even added the “$colors” in the variable.scss in the root but it didn’t work.

4

I have changed the tabs color adding this to the Page.scss:

.tabs-md .tabbar,.tabs-ios .tabbar{

    background: linear-gradient(rgb(3, 132, 218) ,rgb(2, 3, 46));

}

5

I added that to my "tabs.page.scss’ but it doesn’t work. Am I suppose to add the class name to the ion-tabs html?

6

The Last code replaces the variables by default, so it cannot be added to the class name, this works on ionic V3, let me try it in V4

7

Ohhh i see and okay thank you

8

put this into the Tabs.page.scss:

ion-tabs{

--ion-tabbar-background-color:blue;
--ion-tabs-background-color:var(--ion-tabbar-background-color, #ffffff);

}

the styling that are using the V4 is Css4, i advice you to read this: https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components/

here you can understand a little more about this

hope this works for you

1 Like
9

Ahh it works! So would I do the same if I wanted to change the color of the icon and the color of the icon when active?

10

yes, only find the variable that you have to modify

11

Like this “–ion-tabbar-color:white” ?

12

if you want to modify the color when selected put this:

–ion-tabbar-text-color-active:red;

when not this:

–ion-tabbar-text-color:green;

Anyway, the way to find which variable you have to modify is:
1:right clic on the part that you want to modify and clic on inspect
2:select the true area
3: find the variable

Imagen1

PD: sorry for the img quality

1 Like
14

It seems like I am doing it wrong but I add this code to my scss and I dont get any results

.sc-ion-tabbar-ios-h {
    --background: var(--ion-tabbar-background-color, #f8f8f8);
    --background-rgb: var(--ion-tabbar-translucent-background-color-rgb, 248, 248, 248);
    --color: #f25454;
    --color-selected: var(--ion-color-primary, #3880ff);
    --background-focused: var(--ion-tabbar-background-color-focused, #dadada);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 50px;
    border-top: .55px solid rgba(var(--ion-tabbar-border-color-rgb,0,0,0),.2);
    font-size: 10px;
    contain: strict;
}
15

in the case of background, background-rgb, color-selected, background-focused and border-top you have to edit the variables that are into the parenthesis, like

–ion-tabbar-background-color:rgb(0,0,0)

and this dont work because you´re tying to edit the basic style, as i mentioned before, this works on ionic V3, in v4 you can do it in the classic way:

  1. Create a style and Mention it in the html as Class=" "
  2. Edit the base style as we´re doing before with the ion-tabs
16

The Ionic team are currently working on this and announced a fix as part of 4.0.0-beta.14

See: #16104 and #16003