How do I change the colors of the animated skeleton text?

Ionic Framework
1

I’ve been trying to change the color of the animated ion-skeleton-text component to get some more contracts with my dark background. See below. It is hardly visible now.

02
Screen Shot 2019-04-06 at 13.09.02.png758×470 13 KB

I’ve tried to change the following ionic css variables provided by the docs.

ion-skeleton-text {
  --background: var(--ion-color-white); 
  --background-rgb: var(--ion-color-white);
}

When I change the --background variable, nothing happens. When I change the background-rgb variable, the entire skeleton text disappears.

What is the best approach to change the colors to get more contrast for darker backgrounds?

2 
ion-skeleton-text {
    --background-rgb: 230,40,50;
}

seems to work for me. note the value should be provided a rgb so in your above case --ion-color-white might not have been an rgb value?

3 Likes
3

Thanks. That was my mistake!

1 Like