Ion Refresher color change on diferents pages of Ionic4/5

Question

I have an app with different pages, every page has a different emphasis color

I need to change the IonRefresher color to match with it, but i only found info about change it globally adding the follow code to global.scss file:

ion-refresher.refresher-native ion-spinner{
    color: var(--ion-color-secondary) !important;
}

There is no info of coloring on the oficial doc

Taylor Rahul · Accepted Answer · 2021-01-27T05:40:31.887

1

If you have more then one page and you want to match spinner color with the page color you can but you will have to specify this on the global.scss. you can create as much spinner color as you want. and you can use them by the CSS class. I have shared HTML and CSS code for it below please have a look

global.scss

 .red.refresher-native{
   ion-spinner{
      color: red!important;      
   }

   .arrow-container ion-icon{
      color: red!important;   
   }
} 

.green.refresher-native{
   ion-spinner{
      color: green!important;      
   }
   .arrow-container ion-icon{
      color: green!important;   
   }
} 
.purple.refresher-native{
   ion-spinner{
      color: purple!important;      
   }
   .arrow-container ion-icon{
      color: purple!important;   
   }
}

html code

//Change class name as per your requirement 
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)" class="red">
    <ion-refresher-content></ion-refresher-content>
</ion-refresher>

<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)" class="green">
    <ion-refresher-content></ion-refresher-content>
</ion-refresher>

edited Jan 27 '21 at 05:40

answered Jan 23 '21 at 17:45

Taylor Rahul

709
6
19

Excelent, this work almost perfectly. Now i have to deal with the arrow in front of the pulling-icon, wich not change it color. Tanks! – Gustavo J Maciel Britez B0rrA Jan 25 '21 at 13:20
can you show me which icon you are talking about – Taylor Rahul Jan 25 '21 at 13:20
Shure, i make a gif here [link](https://hnet.com/video-to-gif/viewimage/20210125-00-mKkN9TRk4RBOQZU4-XnoBss-HNET). When i pulling the arrow in front doesn't change it color, but the spinner does – Gustavo J Maciel Britez B0rrA Jan 25 '21 at 13:37
that'll be awesome @taylor-rahul – Gustavo J Maciel Britez B0rrA Jan 26 '21 at 11:34
i have edited my answer you can use the updated css for arrow color change – Taylor Rahul Jan 27 '21 at 05:41

Ion Refresher color change on diferents pages of Ionic4/5

1 Answers1