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

Question

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:

Solution 1

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;

Solution 2

What you are doing is correct. Though you can't see the effect because there is an overlaying ion-item in your markup which has also its own background.

So the case here is you can set the background for the ion-item to be transparent.

ion-item{
    background-color: transparent;
}

Or don't pursue changing the ion-card background and rather change the background for ion-item.

Comments

[Lavanya Parvathi]

Thanks it is working Fine I also need the text to be align same as like my image . I am struggling where i need to change in scss.

[sebaferreras]

I'm afraid that needs to be done manually with something like .ion-card { text-align: left; }