[system] useColorScheme should return null during hydration about material-ui

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