ionic 4 tabs how to change background color of selected tabs

Question

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.

Answer 1

Just use this in your tabspage SCSS in Ionic 4,

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

Answer 2

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