Change ion-item background color in Ionic 4.0

Use this special ionic CSS rule:

ion-item{
   --ion-background-color:#fff;
}

I seem to have found a fix. You just need to add color="light" to the ion-item element. Please see below:

<ion-item class="light-back" color="light">
  <ion-icon name="search" color="light"></ion-icon>
    <ion-input required type="text" placeholder="Search for a site" color="light">
  </ion-input>
</ion-item>

The problem is that other code gets injected based on my theme, which I set to my primary color from my variables, so I need to indicate that I am again using light theme (which I had already set up to be #fff in my variables).

Hope this helps someone in the future :)


I found the working one in ionic 4. Apply the below 2 css in your .scss file where you have implemented ion-list and ion-item:

    ion-item {
         --ion-background-color: white !important;
    }
      .item, .list, .item-content, .item-complex {
        --ion-background-color: transparent !important;
      }