Ion-refresher-content styling - ionic 4

Ionic Framework ionic-v3
1

I am trying to add a a refresher to my home page cutting and pasting right from the documentation:

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
</ion-content>

If the background color of the page is light I can see the refresh spinning circles and text. When I change the background color of the page to black I can no longer see the refresh spinner or text.

In ionic 3 there are a number of sass variables to configure this:

|`$refresher-icon-color`|`#000`|Color of the refresher icon|
|`$refresher-icon-font-size`|`30px`|Font size of the refresher icon|
|`$refresher-text-color`|`#000`|Text color of the refresher content|

How do you set this in ionic 4?

I have tried the following in the page’s .scss

ion-refresher-content {
    color: white !important;
}

Any help would be appreciated.

Thanks

2

Look this, but only found for the icon

ion-refresher ion-refresher-content {
     background: #000;
    --color:#FFF!important;
}

Captura

The

--refresher-pulling-text:#FFF!important;
--refresher-refreshing-text:#FFF!important;

And

$refresher-icon-color:#000;
$refresher-icon-font-size: 30px;
$refresher-text-color:#000;

Not found in v4.x

The clas .refresher-pulling-text it is the one that applies the color of the text but I tried in several ways to force it but I could not force the text to change color too

3

Thank you for your response. For some reason it is not working in my application.

Below is what I captured out of chrome://inspect for the ion-refresher-content.

<ion-refresher-content _ngcontent-dgf-c1="" pullingicon="arrow-dropdown" pullingtext="Pull to refresh" refreshingspinner="circles" refreshingtext="Refreshing..." ng-reflect-pulling-icon="arrow-dropdown" ng-reflect-pulling-text="Pull to refresh" ng-reflect-refreshing-spinner="circles" ng-reflect-refreshing-text="Refreshing..." class="ios hydrated"><div class="refresher-pulling"><div class="refresher-pulling-icon"><ion-icon role="img" class="ios hydrated" aria-label="arrow dropdown"></ion-icon></div><div class="refresher-pulling-text">Pull to refresh</div></div><div class="refresher-refreshing"><div class="refresher-refreshing-icon"><ion-spinner class="ios spinner-circles hydrated" role="progressbar"></ion-spinner></div><div class="refresher-refreshing-text">Refreshing...</div></div></ion-refresher-content>

Here is the associated .scss for ion-refresher-content I copied out of chrome//inspect:

ion-refresher[_ngcontent-dgf-c1] ion-refresher-content[_ngcontent-dgf-c1] {
background: #000;
–color: #FFF!important;
}

So it is trying to apply the color it is just not working.

4

I got your solution to work when I encapsulated my ion-refresher in p like so:

<ion-content class="listOptions">
    <p>
    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content
            pullingIcon="arrow-dropdown"
            pullingText="Pull to refresh"
            refreshingSpinner="circles"
            refreshingText="Refreshing...">
        </ion-refresher-content>
    </ion-refresher>
    </p>

I think this is related to the shadow dom

Thanks again.

5

The tag of inspect on chrome don’t works is you copy and tried to use this.

It is very rare the truth that does not allow to force the style of it, but eventually I will try to go back to see if I achieve something and I share it.
Regards!

6

I put the following in the global.scss and was able to get the text to be white also:

.refresher-ios .refresher-pulling-icon, .refresher-ios .refresher-pulling-text, .refresher-ios .refresher-refreshing-icon, .refresher-ios .refresher-refreshing-text {
    color: var(--ion-text-color,#FFF);
}
1 Like
7

Your solution doesn’t work for me, :slight_smile:
but what i do to solve mine is

i give --ion-text-color inside the root of variable.scss

but, it can only change the color. for further styling it cant :upside_down_face:
and be careful, it can change the entire text color of your app unless you declare the other color
as i know --ion-text-color hierarchy is low, its defeated by inline css and color defined by class. so rest assured

8 
ion-refresher ion-refresher-content {
  --color:#FFF !important;
  
  .refresher-pulling-text, .refresher-refreshing-text, .refresher-refreshing-icon, .refresher-pulling-icon {
    color: #fff !important;
  }
}
1 Like