[docs-infra] Dark mode not persisting after switching from light mode

[twassim1234]

Steps to reproduce

Link to live example: (required)

Steps:
1.Navigate to the website in light mode.
2.Switch to dark mode.
3.Note the appearance in dark mode.
4.Refresh the page or navigate to another page within the website.

Current behavior

After switching from light mode to dark mode, the website briefly displays in light mode before switching back to dark mode.

daark.mp4

Expected behavior

The website should consistently remain in dark mode after the user has selected it, regardless of previous light mode usage.

Context

This issue affects the user experience of the website, particularly for users who prefer dark mode for extended periods. Consistent dark mode usage is expected for better accessibility and visual comfort.

Your environment

npx @mui/envinfo

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

Search keywords: MUI, dark mode, light mode, bug, behavior, environment, reproducible

[danilo-leal]

Hey @twassim1234, thanks for the issue! Can you try to reproduce this problem somehow? I can't reproduce it myself. From the issue description, it seems you intended to attach a video, but it apparently didn't go through. That would be helpful.

[twassim1234]

Hey @twassim1234, thanks for the issue! Can you try to reproduce this problem somehow? I can't reproduce it myself. From the issue description, it seems you intended to attach a video, but it apparently didn't go through. That would be helpful.

I add another video and now it's clear

[alexfauquette]

The rendering is done with 4 steps:

1. Render light mode
2. Add space for the tabbed code blocks
3. Add the tab state and the code associated
4. Style all the code blocks

[CelestialWorthy]

I've successfully reproduced the bug in my browser. In the video, you can see that the first attempt showed the bug mentioned , while the second attempt worked as expected. This confirms the existence of the bug.

Overview.-.Material.UI.-.Brave.2024-04-15.15-07-10.mp4

[twassim1234]

I've successfully reproduced the bug in my browser. In the video, you can see that the first attempt showed the bug mentioned , while the second attempt worked as expected. This confirms the existence of the bug.

i think there is nothing changed

[CelestialWorthy]

I've successfully reproduced the bug in my browser. In the video, you can see that the first attempt showed the bug mentioned , while the second attempt worked as expected. This confirms the existence of the bug.

i think there is nothing changed

Could you please explain more what do you mean by nothing changed ? I jus t wanted to show that the bug does indeed happen but not all the time.

[mnajdova]

We are aware of this issue, we can avoid it once all docs is migrated to use CSS variables. For example, at this moment this is done on the landing page: https://mui.com (if you refresh there is no flickering there), but it is not done in the docs pages. We have a guide on how you can avoid this in your apps in https://mui.com/material-ui/experimental-api/css-theme-variables/overview/ guide.

[twassim1234]

We are aware of this issue, we can avoid it once all docs is migrated to use CSS variables. For example, at this moment this is done on the landing page: https://mui.com (if you refresh there is no flickering there), but it is not done in the docs pages. We have a guide on how you can avoid this in your apps in https://mui.com/material-ui/experimental-api/css-theme-variables/overview/ guide.

To facilitate the process, would you be open to providing some guidance or examples on how we can implement this effectively in the docs pages? Perhaps we could collaborate on improving the documentation together. Additionally, if there are any specific challenges or roadblocks you've encountered in implementing CSS variables in the docs, feel free to share, and we can work through them together.