Continuous disturbing color mode switching on Catalyst UI previewe site

[matagaralph]

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs
• Component name: N/A

Describe the bug When switching to dark mode and then back to light mode, the page starts flickering or continuously changing between the color modes in a disturbing manner. I can also confirm this behavior on my mobile phone. Please investigate this issue.

To Reproduce Steps to reproduce the behavior:

1. Go to https://catalyst.tailwindui.com Catalyst UI preview site
2. Click on color mode switcher couple of times trying to switch between themes and watch the behavior of the pages.
3. The page will start flickering or continuously changing the color modes. Expected behavior Switching from dark to light or vice versa should work perfectly without a disturbing continuous transitions or flickerings.

Browser/Device (if applicable)

• OS: Linux, KDE Fedora 38, Samsung A52 Android v14
• Browser : Firefox Latest

[adamwathan]

Thanks for reporting, narrowed this down to just happening on pages that have a demo in an iframe and I think what's happening is the docs themselves and the demo are fighting with each other when the theme switch happens, triggering some sort of infinite loop. Going to replace those embedded demos with screenshots for now until we can figure it out!

[adamwathan]

Alright fixed by replacing the embedded demos with images for now 👍 Going to close this one, thanks for reporting!

[matagaralph]

I can confirm that the temporary fix worked. Thanks for addressing it. I no longer need to reload the pages.