[docs] Theme mode switching is infinite when switching fast

[frontend-sensei]

Steps to reproduce

Steps:

1. There is no link because it is exist on mui.com documentation pages. But I will provide simple steps to reproduce.
2. PLEASE, BE CAREFUL. This behavior could negatively impact individuals who are sensitive to rapid changes in screen brightness, such as those with photosensitivity or other visual sensitivities. So don't try to reproduce it if you have high sensitivity for that.
3. At first open Dark mode documentation page https://mui.com/material-ui/customization/dark-mode/#toggling-color-mode
4. Then open these 4 tabs in the same browser.

• https://mui.com/material-ui/customization/css-theme-variables/configuration/
• https://mui.com/material-ui/react-drawer/
• https://mui.com/material-ui/react-app-bar/#app-bar-with-responsive-menu
• https://mui.com/material-ui/customization/breakpoints/

5. On Dark mode page start quickly change light mode to dark and vise versa
   https://mui.com/material-ui/customization/dark-mode/#toggling-color-mode
6. Then stop clicking and see how modes switches by their own without any additional interaction.
7. To stop those infinite mode changing, just close all tabs and leave one of them.

Current behavior

When more than 4 tabs opened, frequent theme mode changing starts infinite mode changing between all tabs.

Expected behavior

When user change theme modes, mode is changes only once user clicked.

Context

This is crucial to take a look, because such behavior may impact on people feeling which have problems while look at frequently changing screens from dark to light.
I think this is because the tabs synchronize data about the active mode of the theme. Because after closing the tabs, the problem disappears. Apparently, the tabs react to changes from other tabs asynchronously and at the same time send these changes to other tabs. And because of this event, the changes run back and forth

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: theme, mode, flickering, infinite

[DiegoAndai]

Hey @frontend-sensei, I'm unable to reproduce this, may I ask you to share a recording of it?

[frontend-sensei]

Hi, @DiegoAndai Nice to meet you!
While recording the video, I saw that it is even easier to reproduce by focusing on the radio buttons and using the navigation arrows to switch the value. Also, the problem is better reproduced when more tabs are open, as in the video. You can open any other pages of the documentation. In the video, at the bottom left, I display the keys pressed, so that you can see when i press the arrows and when i stop.

Around the 20th second mark, you can see that I stopped pressing anything at all and the theme continues to switch.

2024-12-12.17-46-11.mp4

[DiegoAndai]

Thanks for the recording and nice to meet you as well @frontend-sensei 😊

I'll mark this as an enhancement for the website.

If you (or anyone else stumbling here) are having similar issues with this in their apps, throttling the theme switching should alleviate the issue. This is probably due to overloading the state switching as the theme changing is an expensive operation at the moment, probably worsened by the amount of open tabs.