Header color in android not working

I am trying to leave the black header on the android device, but it is not working. IOS works normally, but not on Android. I have already tested several alternatives, can you help me?

my component.html:

<ion-header>
  <ion-toolbar>
  </ion-toolbar>
</ion-header>

I try this in my component.scss and global.scss but not working:

ion-header {
    @media (prefers-color-scheme: dark){
        .md body {
            --ion-background-color: #000000 !important
        } 
    }
    
    @media (prefers-color-scheme: light){
        .md body {
            --ion-background-color: #000000 !important
        } 
    }
}

@media (prefers-color-scheme: dark){
    .md body {
        --ion-background-color: #000000 !important
    } 
}

@media (prefers-color-scheme: light){
    .md body {
        --ion-background-color: #000000 !important
    } 
}

my component.scss:

ion-content{
    --ion-background-color: #ffffff;
    --ion-background-color-rgb: 255,255,255;
    --ion-text-color: #000000;
    --ion-text-color-rgb: 0,0,0;
}

ion-card-content {
    margin: 0 auto;
}

ion-icon {
    color: black;
    font-size: 24px;
}



button {
    background-color: white !important;
    color: black;
    border-radius: 5px;
    border: 2px solid transparent;
    outline: none;
}

ion-card {
    --ion-background-color: #ffffff;
    background-color: white !important;
    border: none !important;
    font-family: $font;
}

ion-fab-button {
    --background: black !important;
    --background-activated: black;
    --background-focused: black;
    --background-hover: black;
}

I need this in all devices android, theme light or dark:

but in device emulator the background color is white, why?

thanks =)