Dark mode flicker on Vite.js

[mtr1990]

Steps to reproduce

Dark mode flicker Vite.js version :
https://stackblitz.com/edit/github-5gkalw?file=src%2Fmain.tsx,src%2Ftheme.tsx,src%2FApp.tsx,node_modules%2F%40mui%2Fmaterial%2FCssBaseline%2FCssBaseline.d.ts

For comparison I recreated the Next.js version
https://stackblitz.com/edit/github-rfxsj1?file=src%2Fapp%2Fpage.tsx,src%2Fapp%2Flayout.tsx,src%2Ftheme.ts,src%2Fcomponents%2FApp.tsx

Result

flicker.mp4

Current behavior

Dark mode flicker on Vite.js version with MUI v6.

in MUI v5 when used with CssVarsProvider and extendTheme don't have this problem.

Expected behavior

No flicker when refresh page

Context

No response

Your environment

No response

Search keywords: Dark mode flicker

[siriwatknp]

The vite setup you provided is client side only. It won't be possible to prevent flickering because Material UI needs to render before generating the CSS variables.

On the other hand, the Next.js works because of SSR setup + InitColorSchemeScript component

Note: InitColorSchemeScript cannot be used in Vite because you cannot import it in index.html.

[siriwatknp]

The possible way is to use Pigment CSS to extract CSS variables at build time.

[mtr1990]

@siriwatknp Thanks for clarifying.

Pigment CSS is currently only a experimental version. Is this a good time to migrate to Pigment CSS? Because my application has quite a few components. I tried integrating before but had a lot of errors. Maybe I will try again.

Currently I only see examples for Vite.js and Next.js

Can you please tell me where I can get an example of Pigment CSS + CRA (react-script)?

[siriwatknp]

Can you please tell me where I can get an example of Pigment CSS + CRA (react-script)?

I don't think we will add an example for CRA, it's outdated. Is there any reason that you cannot use Vite?

[mtr1990]

Can you please tell me where I can get an example of Pigment CSS + CRA (react-script)?

I don't think we will add an example for CRA, it's outdated. Is there any reason that you cannot use Vite?

Personally, I still like to use Vite.js because of its performance.

However, some of my customers still want to use CRA in their projects. So that's why I mentioned this

[siriwatknp]

Hey, with the latest release. You can provide noSsr to the ThemeProvider. This will fix the flicker for client-side application:

<ThemeProvider theme={theme} noSsr>

See https://mui.com/material-ui/customization/dark-mode/#disable-double-rendering

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@mtr1990 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.