fix: conflicting color-scheme and gradient stops between ease-theme-switcher and ease-gradient-animate

[Pcmhacker-piro]

Description

The Theme Switcher (#30436) toggles color-scheme and --ease-theme-* custom properties, while the Animated Gradient Background (#30442) animates --ease-ga-bg-1 through --ease-ga-bg-4 color stops. When the theme switches at the same time the gradient is mid-animation, the color stop transition snaps instead of blending smoothly because the theme property change resets the animated property mid-frame.

Affected Components

• Theme Switcher (Add Theme Switcher component with multi-theme support #30436)
• Animated Gradient Background (Add Animated Gradient Background utility with smooth color transitions #30442)

Suggested Resolution

• Separate theme timing from gradient animation using animation-play-state
• Coordinate transitions via a shared animation-delay

[github-actions]

Hey @Pcmhacker-piro! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside the submissions/ directory (e.g., submissions/examples/your-feature-name/ or submissions/docs/your-feature-name/)
• Include demo.html · style.css · README.md in your folder
• Max 25 active issues per contributor — unassign others before taking new ones
• Join our official Discord Server (Optional - for general developer chat and support; official issues belong on GitHub!)

🕑 Inactivity rule: Issues with no progress for 24 hours (1 day) will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡