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

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.

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?

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?


Thanks. That was my mistake!

1 Like