Change toolbar-background

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

This is the fix with inspector


<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="" />
                <h2>{{ title }}</h2>
                <p>{{ description }}</p>
        <ion-buttons slot="start" *ngIf="canGoBack">
            <ion-button (click)="back()">
                <ion-icon slot="icon-only" name="chevron-back"></ion-icon>
        <ion-buttons slot="end">


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

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

Thanks in advance

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

1 Like