Ion Tab bar color only colors the area with buttons

I have the following Tab Bar:

               <IonTabBar slot='bottom'>
                    <IonTabButton tab='Activity' href='/activity'>
                        <IonIcon icon={listOutline} />
                        <IonLabel>Activity</IonLabel>
                    </IonTabButton>

                    <IonTabButton tab='Discover' href='/discover'>
                        <IonIcon icon={searchOutline}/>
                        <IonLabel>Discover</IonLabel>
                    </IonTabButton>

                    <IonTabButton tab='Profile' href='/profile'>
                        <IonIcon icon={personOutline}/>
                        <IonLabel>Profile</IonLabel>
                    </IonTabButton>
                </IonTabBar>

I am styling it like this (because I will have a different color in dark mode):

:root {
  --ion-background-color: #d9ebf2;
  --ion-tabbar-background-color: #82c513;
}

ion-tab-bar{
  --background: var(--ion-tabbar-background-color);


}

The result is this:

you can see it only colors where the buttons are but it is the normal background color outside of it. How do I color the entire tab bar?

Weird I fired it up today and it looks good now. Didn’t change anything.