ionic-team / ionic-team/ionic-framework

bug: Ion Skeleton Text Animation is hard to see through to work in dark mode

Open
#30,740 1 comment 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Describe the Bug

You can barely see ion-skeleton-text on a black/dark background when animated. I can not customize the colors any further when animated.

### Expected Behavior

ion-skeleton-text is either customizable to become visible or is already visible.

### Steps to Reproduce

ion-skeleton-text {
--background: rgba(240, 238, 228, 1);
--background-rgb: 240, 238, 228;
}
put ion-skeleton-text with animated true over black or dark background.

### Screenshots

![image](https://github.com/ionic-team/ionic-framework/assets/38892306/a3ae4ebf-9d2b-48d3-87ee-ac7f63b29ea9)

### Operating System

Windows

### Browser

Chrome

### Version

_No response_

### Additional Information

Ionic v8, React app.

Contributor guide

Open the contributing guide

Research direction

Begin with the ion-skeleton-text component and reproduce the animated case on a dark background using the supplied CSS custom properties. Trace the animation styling and verify the result against the expected behavior: the skeleton should be visibly customizable or already visible in dark mode.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.