bug: Skeleton looks strange after theme change

[akemmanuel]

What version of FlyonUI are you using?

v2.1.0

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://flyonui.com/docs/components/skeleton/#animated-skeleton

Describe your issue

Go to https://flyonui.com/docs/components/skeleton/#animated-skeleton and change the theme from a dark theme to a light theme or the other way round. I used the themes black and light. The skeleton does not change colour first and then it is like a dark to light effect, it just looks weird.

[github-actions]

Hi @akemmanuel

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[PruthviPraj00]

Hello @akemmanuel,

Thank you for your support.

Could you provide reproduction steps as we do not see any issues in live?

[akemmanuel]

Hi @PruthviPraj00,
Sorry, of course.

I used the Chromium browser on Linux Mint, so you might try it with Chrome.

Step 1:

Go to https://flyonui.com/docs/components/skeleton/#animated-skeleton

Step 2:

Wait for the page to load completely. Click on the theme toggle and change the theme from light to dark.

If you have done it you'll see it.

issue.mp4

[akemmanuel]

Update:
I found something similar on this page: https://flyonui.com/docs/navigations/sidebar/

issue2.mp4

[yagnikvamja]

Hello @akemmanuel ,

We have tested the issue you reported, and everything appears to be functioning as expected on our end. It’s possible that the issue may be related to a network problem or an outdated browser version.

Could you kindly try accessing it on a different system or using an updated browser? If the problem still persists, please let us know.

~Best regards,

[akemmanuel]

Have you tested it with Chrome? I am using the last Chromium version. I tested it on Firefox and everything worked fine. Maybe there is an issue in Chromium.

Ah, I disabled effects in my system preferences. However, sorry!

[akemmanuel]

I've done a little research. That was causing the issue

.skeleton-animated {
    @media (prefers-reduced-motion: reduce) {
        transition-duration: 15s;
    }
}

Is that intentional?

[PruthviPraj00]

@akemmanuel,

Yes, some people disable it.