Lavanya Parvathi Lavanya Parvathi - 3 months ago 46
TypeScript Question

How to change the color of <ion-card> using ionic2

I am trying to change the color of to lightgray I used the html code as below:

<ion-card *ngFor="let details of checkOutAddr" round inset class="ion-card">
<ion-item>
<ion-row>
<ion-col><ion-icon ios="ios-create" md="md-create" item-right class="color1"></ion-icon>
<b>{{details.name}}</b>
</ion-col>
</ion-row>

<ion-row>
{{details.stage}}
</ion-row>

<ion-row>
{{details.main}}
</ion-row>

<ion-row>
{{details.state}}
</ion-row>

<ion-row>
<ion-col>
<ion-icon ios="ios-call" md="md-call" item-left></ion-icon>
{{details.phone}}
</ion-col>
</ion-row>

<ion-row>
<ion-col>
<ion-icon ios="ios-mail" md="md-mail" item-left></ion-icon>
{{details.mail}}
</ion-col>
</ion-row>
</ion-item>
</ion-card


I used the scss code as below:

.ion-card {
background-color: slategray !important;
}


How do i get the look and feel as below img:

enter image description here

Answer

In order to do it in a more Ionic2 way you need to replace the value of these sass variables:

$card-ios-background-color
$card-md-background-color
$card-wp-background-color

So, you just need to add the new value in app/theme/app.variables.scss, like this:

$card-ios-background-color: slategray;
$card-md-background-color: slategray;
$card-wp-background-color: slategray;