ionic framework - 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

question from:https://stackoverflow.com/questions/65852378/ion-refresher-color-change-on-diferents-pages-of-ionic4-5

Answer 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>