CODEWITHSUNDEEP
tabsbackground-colorionic4
user2734974
user2734974

Reputation: 41

ionic 4 tabs how to change background color of selected tabs

can any one help me on this: I am already add this in 'global.scss'

.tab-btn-selected {
    background: rgb(134,31,194);
    color: rgb(134,31,194);
    --color-selected: rgb(134,31,194);
}

.tab-btn-selected[aria-selected=true] {
    color: #fff; /*your  text color */
    background: rgb(134,31,194); /* your background color*/
}

but nothing is changed.

Upvotes: 3

Views: 15076

Answers (8)

Saeb Amini
Saeb Amini

Reputation: 24400

The correct way to do this is to override the Ionic theme variables via the variables.css file:

// variables.css

/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */

/** Ionic CSS Variables **/
:root {
  --ion-tab-bar-color-selected: #F00; /*your desired color */
}

Upvotes: 0

starterProgrammer
starterProgrammer

Reputation: 286

tab background you can try below code

ion-tab-bar{
   .tab-selected{
     // to change background color 
     background:red;
     // to change icon and text color 
     color:green;
   }
 }

I hope this will help

Upvotes: 1

zvolnix
zvolnix

Reputation: 1

The following worked for me

ion-tab-button[aria-selected=true] {
    background-color: #ddd;
 }

Upvotes: 0

Faisal Rashid
Faisal Rashid

Reputation: 378

HTML

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="index">
      <ion-icon name="list"></ion-icon>
      <ion-label>Lessons</ion-label>
    </ion-tab-button>

    <ion-tab-button class="favorites-button" tab="favorites">
      <ion-icon name="heart"></ion-icon>
      <ion-label>Favorites</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

SCSS

ion-tab-button.favorites-button {
    --color-selected: red;
}

Upvotes: 0

b.fiss
b.fiss

Reputation: 219

In ionic 4 with angular 8 I got it work in web browsers like this (not tested on mobile devices):

in global.css I added:

ion-tab-button {
  --ripple-color: var(--ion-color-medium);
  --color: var(--ion-color-dark);
  --color-selected: var(--ion-color-medium);
}

ion-tab-button.tab-selected {
  --background: var(--ion-color-dark) !important;
  --color-selected: var(--ion-color-light);
}

Upvotes: 2

Ivin Antony
Ivin Antony

Reputation: 71

Just use this in your tabspage SCSS in Ionic 4,

ion-tab-bar{
    --color-selected: #000 !important; ( use your favourite color instead of #000 ).
}

Upvotes: 7

Ralph Hinkley
Ralph Hinkley

Reputation: 390

I am using ionic 4 with stenciljs. My <ion-tab-button/> had the following class list when unselected:

class="tab-has-icon tab-has-icon-only tab-layout-icon-bottom hydrated"

then when selected:

class="tab-has-icon tab-has-icon-only tab-layout-icon-bottom hydrated tab-selected"

my Component had the following properties:

@Component({
  tag: 'app-task',
  styleUrl: 'app-task.css'
})

so I added the following to app-task.css and was able to change the font and background color:

.tab-selected{
  background: rgb(134,31,194) !important;
  color: white !important;
}

Upvotes: 6

Antonio DB
Antonio DB

Reputation: 77

I did it on variables.scss:

--ion-tabbar-text-color-active: rgb(134,31,194);

Upvotes: 1

Related Questions