I am struggling to change the background color of my Ionic login page. I have tried adding custom CSS in various places, such as core.scss:149, but it only works when I add it directly in Chrome developer tools. How can I get this custom background color to show up by editing the SCSS file for my component?
Here is a snippet of my CSS:
.div-login{
min-height: 70%;
margin-left: 10%;
margin-right: 10%;
margin-top: 20%;
border-radius: 30px;
min-width: 60%;
background-color: gray;
}
.ion-page {
background-color: red !important;
}
.loginFields{
margin-left: 5%;
margin-right: 5%;
border-radius: 10px;
margin-bottom: 5%;
}
This is how my HTML is structured:
<div class="div-login">
<div *ngIf="!registerNewUserVariable">
<div style="display: flex; justify-content: center; align-items: center;">
<p style="font-size: 20px;">Login</p>
</div>
<div style="display: flex; justify-content: center; align-items: center;">
</div>
<div>
<form (ngSubmit)="login()" [formGroup]="credentials">
<ion-item class="ion-margin-bottom" class="loginFields">
<ion-input
type="email"
placeholder="Email 🧙"
formControlName="email"
></ion-input>
</ion-item>
<ion-item class="ion-margin-bottom" class="loginFields">
<ion-input
type="password"
placeholder="🔒"
formControlName="password"
></ion-input>
</ion-item>
</form>
<p (click)="resetPassword_()" style="font-size: 12px; text-decoration: underline; margin-left: 7%;">Passwort vergessen</p>
</div>
<ion-button type="submit" color="warning" class="loginFields" expand="block" [disabled]="!credentials.valid" (click)="login()" style="margin-top: 15%;"> Sign in</ion-button>
<p style="display: flex; justify-content: center; align-items: center;">📌 connect 📌</p>
<ion-button color="light" style="display: flex; justify-content: center; align-items: center; margin-left: 10%; margin-right: 10%; margin-top: 10%;" (click)="loginWithGoogle()">
<ion-icon name="logo-google"></ion-icon>
</ion-button>
<div style="display: flex; justify-content: center; align-items: center;">
<p (click)="registerNewUser()" style="font-size: 12px; white-space: pre-wrap; text-align: center;">No Email Account? <br> <b> <u>Okay Lets Goooo</u>🎡 </b> </p>
</div>
</div>
<div *ngIf="registerNewUserVariable">
<ion-button (click)="registerNewUser()" style="margin-top: 5%; margin-left: 5%;" color="medium">
<ion-icon name="arrow-back-outline"></ion-icon>
</ion-button>
<div style="display: flex; justify-content: center; align-items: center;">
<p style="font-size: 20px; white-space: pre-wrap; text-align: center;">nice to meet u </p>
</div>
<p style="margin-left: 5%;">Email? </p>
<form (ngSubmit)="register()" [formGroup]="credentialsRegister">
<ion-item class="ion-margin-bottom" class="loginFields">
<ion-input
type="email"
placeholder="Email 🧙"
formControlName="email_"
></ion-input>
</ion-item>
<p style="margin-left: 5%;"> pw</p>
<ion-item class="ion-margin-bottom" class="loginFields">
<ion-input
type="password"
placeholder="🔒"
formControlName="password_"
></ion-input>
</ion-item>
<ion-item class="ion-margin-bottom" class="loginFields">
<ion-input
type="password"
placeholder="🔒 check"
formControlName="passwordCheck_"
></ion-input>
</ion-item>
</form>
<ion-button type="submit" color="warning" class="loginFields" expand="block" (click)="register()" style="margin-top: 15%;"> Register</ion-button>
</div>
</div>