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 =)