Как изменить цвет фона компонента 4 вкладки

Question

Я создаю приложение ionic 4.используя компонент Tab для представления 3 вкладок.цвет по умолчанию компонента вкладки в ионном - синий.цвет фона по умолчанию белый.Я хотел бы изменить и выбрать другой цвет фона.

В документации предлагается добавить:

:root {
  --ion-tab-bar-background: red; // or some other color
}

Это не сработало для меня.Я также попытался изменить переменные .scss в папке темы в приложении ionic 4, это также не работало для меня.Я также читаю другие сообщения в SOF, но ничего не получается и не имеет отношения к ionic 4, например, этот пост: Как изменить цвет фона панели вкладок и значка вкладки в Ionic 4 предлагать решения, которые не работали для меня

мой базовый шаблон:

<ion-tabs main color="primary">
  <ion-tab-bar slot="top" >
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>tab1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>tab2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>tab3</ion-label>
    </ion-tab-button>
 </ion-tab-bar>
</ion-tabs>


<ion-header>
  <ion-toolbar>
    <ion-title>
      home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-card class="welcome-card">
      <ion-img src="./../../assets/background-for-baby-picture.jpg"></ion-img>
      <ion-card-header>
        <ion-card-subtitle>guide</ion-card-subtitle>
       <ion-card-title>welcome</ion-card-title>
     </ion-card-header>
      <ion-card-content>
        <p>info </p>
      </ion-card-content>
    </ion-card>
   <ion-list lines="none">
     <ion-list-header>   
  </ion-list-header> 
</ion-list>
</ion-content>