Theming in IONIC v4.x

All of the Ionic components are themed using CSS properties (variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the Ionic Variables.

Snapshot of our ionic login app

Login page using ion-content, ion-card, ion-item in ionic app

1. Changing background color of ion-content in .scss file

Here we can see we are only applying background color to ion-content but we can see here it’s also being applied to ion-card also 🙄.( You can comment below if you have any idea on that )

background color of ion-content

ion-content {
 — background: #1D976C;
/* fallback for old browsers */
 — background: -webkit-linear-gradient(to top, #93F9B9, #1D976C);
/* Chrome 10–25, Safari 5.1–6 */
 — background: linear-gradient(to top, #93F9B9, #1D976C);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

2. Changing background color of ion-card using class in .scss file.

background color of ion-card

.card {
 — background: rgb(37, 179, 129);
}

3. Changing background color of ion-item using class in .scss file

background color of ion-item

.item {
 — background: $background-color-custom;
}

Your HTML structure

<ion-content>
<ion-card class=”card”>
<ion-card-header>
<ion-card-title>Login</ion-card-title>
</ion-card-header>
<ion-card-content>
<form [formGroup]=”authForm” (ngSubmit)=”onFormSubmit()”>
<ion-grid>
<ion-row size=”12">
<ion-col size-md=”6" size=”12">
<ion-item class=”item”>
<ion-label position=”floating” >
Email
</ion-label>
<ion-input color=”danger” formControlName=”email” type=”text”></ion-input>
</ion-item>
</ion-col>
<ion-col size-md=”6" size=”12">
<ion-item class=”item”>
<ion-label position=”floating”>
Password
</ion-label>
<ion-input formControlName=”password” type=”password”></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ng-content select=”.btn-login”></ng-content>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-card-content>
</ion-card>
</ion-content>

Thanks.