Change toolbar-background

Ionic Framework
1

I migrated on Capacitor but I have issue on my header. I can’t change background color.

If I use inspector and add style at runtime, it works.

This is the android screen

image
image594×1194 93.4 KB

This is the fix with inspector

image
image1712×329 102 KB

HTML:

<ion-header class="ion-no-border">
    <ion-toolbar class="ion-padding-top mgd-toolbar">
        <ion-item lines="none">
            <ion-avatar slot="start" *ngIf="icon">
                <img [src]="icon" alt="" />
            </ion-avatar>
            <ion-label>
                <h2>{{ title }}</h2>
                <p>{{ description }}</p>
            </ion-label>
        </ion-item>
        <ion-buttons slot="start" *ngIf="canGoBack">
            <ion-button (click)="back()">
                <ion-icon slot="icon-only" name="chevron-back"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-buttons slot="end">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

SCSS:

.mgd-toolbar {
    background-color: red !important;
    background: green !important;
}

.toolbar-container {
    background-color: yellow !important;
    background: brown !important;
}

Thanks in advance

2

Use the css Variable --background, this is documented here

1 Like