Solución:
Parece que el encabezado de iones actúa más como un contenedor para un componente iónico interno (como una barra de herramientas de iones). Revisé la documentación de la barra de herramientas de iones de Ionic v4. Este componente tiene muchas propiedades personalizadas de CSS personalizadas, incluido –background, que se pueden personalizar. Esto puede ser lo que estás buscando.
Suponiendo que utilizó la CLI para crear un componente de página de ‘inicio de sesión’, puede agregar una nueva definición de clase css a la login.scss expediente:
.new-background-color{
--background: #54d61c;
}
Y luego consúltelo en su login.page.html expediente:
<ion-header>
<ion-toolbar class="new-background-color">
<ion-title>Login</ion-title>
</ion-toolbar>
</ion-header>
He usado el siguiente fragmento de código para cambiar el color del encabezado:
<ion-header>
<ion-toolbar color="primary">
<ion-title>Login</ion-title>
</ion-toolbar>
</ion-header>
En lugar de primario color, puede utilizar cualquier color personalizado del archivo variables.scss.
en su variable.scss
--ion-toolbar-background: var(--ion-color-primary)
o si desea establecer el fondo para una sola página, puede definir una clase css como esta:
.my-toolbar{
--background: var(--ion-color-primary);
}
o
.my-toolbar{
--background: red;
}
o como far había dicho
<ion-toolbar color="primary">