[bug]: shadcn website light/dark toggle broken

[ejzeronimo]

Describe the bug

I had the docs open then started using the theme toggle on the website to see what certain blocks/components would look like in dark mode. After that I set it back to light mode and stepped away. Then this video happened, please be warned it flashes very fast, so I am wrapping the link that way there is no chance it will auto-play when viewing this issue.

https://github.com/user-attachments/assets/757feda6-8c21-44f6-9f6b-854ec58a698a

Not sure if this is an issue with the site or something weird with next-themes but I figured I would make a bug report here to let you know regardless.

Affected component/components

None, this is the shadcn site

How to reproduce

Go to components page.
Toggle themes ~10 times
Leave on light mode
???
(this was all I did)

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Windows 10, Msft Edge

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[candymask0712]

Has anyone been able to successfully reproduce this bug? Even when I use the same Windows 10 and Edge browser, I cannot replicate the bug.

[candymask0712]

@ejzeronimo
Is this bug easily reproducible on ejzeronimo’s computer? I tried about ten times but couldn’t reproduce it, so I’m curious about how frequently it occurs.

[DemaPy]

@candymask0712 cannot reproduce for myself in MacOs. Chrome.

[DALLLLAWEI]

Reproduce on Windows 11. Edge and Chrome
Open three or more tabs，Increase CPU utilization to 100%
Quick clicking on the theme switch, page will flash

When the CPU is idle or there is only one tab, it cannot be reproduced

When the page flashes, in the Performance tab of DevTools, you will see a loop call to the following two functions
1. 24775-d41bb013d71b5950.js:1:6116

2. 86816-a2801b938146f2fe.js:6:1917



[ejzeronimo]

Thank you for finding a way to reproduce the bug!

I have been trying to reproduce it but have been busy preparing for CES.

My bet is this is an issue with next-themes?

[DALLLLAWEI]

Yes, I can also reproduce it on other websites that use next-themes

[candymask0712]

@DALLLLAWEI
Wow, it’s really impressive that you were able to specifically identify the conditions that cause the bug! How did you figure out that having the CPU utilization reach 100% was one of the conditions?

[DALLLLAWEI]

@candymask0712
Because I happen to have a computer that easily reaches 100% CPU utilization 😉.
I'm not sure if this is one of the conditions.
I just happened to encounter this problem, so I tested it under different conditions
It is easy to trigger with 100% CPU and three tabs.
Or open enough tabs, quick clicks can also trigger.

[DALLLLAWEI]

next-themes v0.4.4 has fixed this issue

[candymask0712]

@DALLLLAWEI
Oh, I got it. Thanks for specific explanation 😊

[ejzeronimo]

An easy way to recreate this is to use a tool like aida64, start a CPU test, then use an autoclicker to rapidly click the theme button while at least 2 tabs are open.

I found that swapping to the charts page then switching tabs causes it most of the time. It seems to be doable when the CPU isn't being stressed but it was much less severe.

I submitted a PR to bump the next-themes version, huge thanks for finding out the conditions @DALLLLAWEI!