Light Theme mode always renders for some seconds before switching to dark mode

In Chrome and Safari, I have noticed that your website always takes some seconds to switch to dark mode when the user has the system preferences set to dark.

I found this query takes a while to resolve: https://github.com/mui-org/material-ui/blob/b17e6856c33e96e1b6c5c5dfac327127cf4be705/docs/src/modules/components/ThemeContext.js#L151

It takes a while to get the results due to the browser appending it some page renders later.

However, prefers light resolves immediately, either true or false, eliminating the “initial flicker”:

const prefersLightMode = useMediaQuery('(prefers-color-scheme: light)');
const preferredType = prefersLightMode ? 'light' : 'dark' ;

the documentation for useMediaQuery will need update if this change is made: https://material-ui.com/components/use-media-query/#usemediaquery

Loving your framework, keep rocking!

[eps1lon]

You probably want to use NoSsr: true in your useMediaQuery.

[eps1lon]

Thank you so much! I’m sorry for taking so much of your time.

No worries. This is definitely a hard issue and I would prefer we wouldn’t put media queries into JavaScript anyway. Having feedback that this is easy to get wrong helps.

To be honest I wouldn’t mind making NoSsr required so that you have decide how your component is going to be used. Hydration quirks should definitely be visible in your codebase.