CODEWITHSUNDEEP
jqueryangularjshtmlcssionic-framework
UniSound Waterloo
UniSound Waterloo

Reputation: 561

Ionic tab background color

Please refer to this image

Hi, I am using Ionic to develop a mobile app. I used Ionic tabs template. On the bottom of the screen, the background of tab is still white. I don't know how to change the background. I am only change the color of the icon with the following code. How can I change the background tab color.

<ion-tabs class="tabs-icon-top tabs-color-{{theme.primary}}" > 
      <ion-tab title="Cards" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
          <ion-nav-view name="tab-dash"> 
          </ion-nav-view>
      </ion-tab>
</ion-tabs>

Upvotes: 0

Views: 2181

Answers (5)

lotus
lotus

Reputation: 45

ion-tab-bar, ion-tab-button{
  background-color: #320d99;
  color: #fff;
 }

 ion-icon{
   color: #ffffff;

 }

it works...

Upvotes: 0

O.O
O.O

Reputation: 1419

Had a similar issue, getting rid of color in tabs-color-royal along with options already provided by Aman did the trick!

<ion-tabs class="tabs-icon-top tabs-{{theme.primary}}">
  <ion-tab title="Cards" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
    <ion-nav-view name="tab-dash">
    </ion-nav-view>
  </ion-tab>
</ion-tabs>

Options:

  • royal
  • light
  • stable
  • assertive
  • calm
  • dark
  • energised
  • balanced

Upvotes: 0

Alessandro De Almeida Castro
Alessandro De Almeida Castro

Reputation: 21

I have the same problem and I did not get any solution that worked.

My home solution in app.scss:

.tabbar {
    background: red !important;
    color: #bbb !important;
    & .tab-button {
        color: #bbb !important;
        & .tab-button-icon {
            color: #bbb !important;

        }

    }
    & .tab-button[aria-selected=true]{
        // text-shadow: 1px 0px #eaeaea;
        color: white !important;
        & .tab-button-icon {
            text-shadow: 1px 0px #eaeaea;
            color: white !important;

        }
    }
}

Upvotes: 2

Aman
Aman

Reputation: 45

you can add other ionic color class too such as -

  1. light - white color
  2. stable - light grey color
  3. assertive - red color
  4. calm - light blue color
  5. dark - black color
  6. energised - yellow color
  7. royal - violet color
  8. balanced - green color

Just replace "tabs-background-positive" with above options.

Upvotes: 0

Shailesh Singh
Shailesh Singh

Reputation: 315

you need to add tabs-background-positive class

<ion-tabs class="tabs-icon-top tabs-color-{{theme.primary}} tabs-background-positive" > 
      <ion-tab title="Cards" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
          <ion-nav-view name="tab-dash"> 
          </ion-nav-view>
      </ion-tab>
</ion-tabs>

Upvotes: 0

Related Questions