Change ion-refresher & ion-infinite-scroll color

Ionic Framework ionic-v3
1

Hi :slight_smile:
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

2

up! still have the problem :frowning:

3

up! still have the problem :frowning:

4

First, I recommand you to wait for the Ionic V4.
Why? Because they are changing the way you are styling the main theme.
In the V3. You can’t change a SCSS variable for one container, now you can:

.test1 {
  --ion-color-tertiary: red;
}
.test2 {
  --ion-color-tertiary: purple;
}

<div class="test1"> 
  <button tertiary> </button>
</div>
<div class="test2">
  <button tertiary> </button>
</div>

If you really want to use V3, open chrome inspector, pick an element, read the style, override with the css file.

5

For ionic v3:

In de refresher documentation, you can find an scss variable to achieve with your purpose.

Same for InfiniteScroll documentation.

6

When Ionic 4 will be released? I need to develop the app now so I think I can’t wait for the update…

I’ve already used the chrome inspector and override the css but didn’t work, I asked here because I did not succeed in any way :frowning:

7

It’s usable actually but not stable.
It’s about month now.

Else, just play with the CSS classes over the chrome inspector to see what happened. I’m pretty sure you can find some tools to help you search it too.