Material-ui: Light Theme mode always renders for some seconds before switching to dark mode

[luminaxster]

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]

We only prerender a single theme. So if you use a different theme locally you get a stale one until the site is fully hydrated.

We would need prerender every possible theme and need to serve the correct one depending on the theme you've saved in cookies.

[luminaxster]

Thank you for your quick reply @eps1lon, the issue I am referring to is not about SSR or prerendering themes, but I see the relationship. I am not using SSR and it happened on my project too. It is about the browsers' time to resolve the two queries: '(prefers-color-scheme: dark)' do not get answered as fast as '(prefers-color-scheme: light)'. In both browsers, I have logged the two queries, and the latter is available on load (true or false), but the former is available sometime later, like if it was appended later. The time difference between these queries is significant.

[eps1lon]

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

[luminaxster]

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

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