Search code examples
ionic-frameworkspinnerdarkmode

Ion Refresher color Icon does not change ionic 5 (stencil)

How can I customize the the styles of ionic refresher spinner icon in ionic 5? I am working on an app with lightmode and darkmode. In lightmode the spinner is displayed in a dark grey on white background. So far so good. But if I switch to darkmode, it is displayed white on white. I tried to change the color f.e. with

<ion-refresher slot="fixed">
      <ion-refresher-content color="primary" refreshing-spinner="crescent">
</ion-refresher-content>

or SCSS

    ion-refresher {
  ion-refresher-content {
      --color: red;
    }
  }

    ion-refresher {
  ion-refresher-content {
      color: red;
    }
  }

and setting the variable to

$refresher-icon-color: red;

I would really appreciate some help. Thank you!

Solution

  • you need to some CSS to get this done. i have added a CSS code below you can add this in your global.css file and you can remove the color option from ion-refresher-content color="primary"

    //add this css code in your global.scss file which in your src folder
ion-refresher.refresher-native ion-spinner{
    color: red!important;      
}