[system] useColorScheme should return null during hydration

[oliviertassinari]

Steps to reproduce

No response

Current behavior

useColorScheme() returns a default value during hydration leading to confusion: it's not accurate and prevents combinatory logic like below.

Expected behavior

I would expect it to return null, see:

material-ui/docs/src/components/header/ThemeModeToggle.tsx

Lines 37 to 46 in 418fb02

	// TODO replace with useColorScheme once all pages support css vars
	const { mode, systemMode, setMode } = useColorSchemeShim();
	const calculatedMode = mode === 'system' ? systemMode : mode;
	const theme = useTheme();
	// Server-side hydration
	if (mode === null) {
	return <IconButton color="primary" disableTouchRipple />;
	}

for a use case.

Context

I saw this in #41223.

Your environment

npx @mui/envinfo

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

Search keywords: -

[yamahmed]

Hey Olivier, i suggest we create a custom hook that provides more control over the initialization process. i'll provide an example of how to do it

[yamahmed]

[yamahmed]

[yamahmed]

In this custom hook 'useAccurateColorScheme', we use the useState and useEffect hooks to manage the state of the accurate color scheme. The useEffect hook runs after the component mounts and fetches the accurate color scheme (e.g., from local storage) and updates the state accordingly.

Then, in your component, you can use useAccurateColorScheme to retrieve the accurate color scheme and perform combinatory logic based on it. This ensures that the color scheme used in your component reflects the accurate value after hydration, preventing confusion caused by inaccurate default values.