Change ion-refresher & ion-infinite-scroll color

Question

It's a "simple" request but I'm not able to achieve this result... In my app I have these two components:

<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content 
      pullingIcon="ios-arrow-down-outline"
      pullingText="Scorri per aggiornare"
      refreshingSpinner="circles"
      refreshingText="Aggiornamento...">>
    </ion-refresher-content>
  </ion-refresher>

and

<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
    loadingSpinner="bubbles"
    loadingText="Caricando più post ...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

And they works fine with a white background. Now I need to change the background color to black but now the text of the two components it's not visible anymore because it's black by default. How can I change che color of the two components?

I tried with a CSS class but the color it's not applied. How is it possible to customize these components?

Thank you

Answer 1

.spinner-crescent{
    color: #adadad;
}

Answer 2

If this helps someone. You have to add a class to the infinite scroll content or just use the tag selector.

<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
        class="infinite-scroll-color"
        loadingSpinner="bubbles"
        loadingText="Caricando più post ...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

And then change the stroke property of the tag line, to change the spinner svg color.

.infinite-scroll-color {
    line {
        stroke: #YOURCOLOR;
    }

    //If you want to change the text color too, just add this css
    .infinite-loading-text {
        color: #YOURCOLOR;
    }
}

Cheers!

Answer 3

As docs suggest (at least for version 1 of ionic):

The ionSpinner icon to display after user lets go of the refresher. The SVG ionSpinner is now the default, replacing rotating font icons. Set to none to disable both the spinner and the icon.

Closes thing in SVG to color is fill property. so you may use it instead of color.

Answer 4

Hope this helps

HTML Code

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content class="loadingspinner"
      loadingSpinner="crescent"
      loadingText="Loading...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

Respective CSS

.loadingspinner{
    --color : #adadad;
}