I’ve got a tab button defined like this (the main tab component for the app):
<ion-tab label="Chat" icon="chatbubbles" badge="{{notificationCount}}" badgeColor="#f4f4f4" href="/tabs/(chat:chat)">
<ion-router-outlet name="chat"></ion-router-outlet>
</ion-tab>
Note that I have tried several colors notably “danger”… just put the actual color code in so I could see if that changed anything…
In the app (using Chrome) it renders lke this:
<ion-badge class="tab-badge ion-color ion-color-#f4f4f4 hydrated">2</ion-badge>
#shadow-root
<style data-style-tag="ion-badge" data-style-mode="ion-badge">:host{--ion-color-base:var(--ion-color-primary, #3880ff);--ion-color-contrast:var(--ion-color-primary-contrast, #fff);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:3px 8px;display:inline-block;min-width:10px;background-color:var(--ion-color-base);color:var(--ion-color-contrast);font-size:13px;font-weight:700;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline;border-radius:4px;font-family:var(--ion-font-family,inherit)}:host(:empty){display:none}</style>
And the badge is the primary color… I’m not sure how the shadow-root style gets sets to primary, but it seems to override what I put in…
Is it something I need to change, or just wait for an update?
`