Изменить цвет ионного освежителя и ионного бесконечного свитка

Question

Это "простой" запрос, но я не могу достичь этого результата... В моем приложении у меня есть эти два компонента:

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

а также

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

И они отлично работают на белом фоне. Теперь мне нужно изменить цвет фона на черный, но теперь текст двух компонентов больше не виден, потому что по умолчанию он черный. Как я могу изменить цвет двух компонентов?

Я пытался с классом CSS, но цвет это не применяется. Как можно настроить эти компоненты?

Спасибо

Answer 1

Как следует из документации (по крайней мере, для версии 1 ионной):

Значок ionSpinner, отображаемый после того, как пользователь отпустит обновленную версию. SVG ionSpinner теперь используется по умолчанию и заменяет вращающиеся иконки шрифтов. Установите значение none, чтобы отключить как счетчик, так и значок.

Закрывает вещь в SVG для color является fill имущество. так что вы можете использовать его вместо color,

Answer 2

      .spinner-crescent{
    color: #adadad;
}

Answer 3

Надеюсь это поможет

HTML код

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

Соответствующий CSS

.loadingspinner{
    --color : #adadad;
}

Answer 4

Если это кому-то поможет. Вы должны добавить класс к содержимому бесконечной прокрутки или просто использовать селектор тегов.

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

А затем измените свойство обводки строки тега, чтобы изменить цвет svg счетчика.

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

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

Ваше здоровье!