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

[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.

[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.

[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.