Problems to implement a specific behaviour of color-scheme

[michaelhuber1937]

I am currently struggeling to implement the following behaviour:

I want to read the current browser-preference (done via useColorScheme()) to use this as color-scheme. The first problems that occurs is that "listening" via useEffect() (see code-below) in the dependency-list has a noticable-delay. So if the browser is set to dark-mode and my app is started for the first time, useEffect is called noticable later. This results in a "flickering" from light to dark.

const colorScheme = useColorScheme();

useEffect(() => {
	// this code is executed noticable delayed
}, [colorScheme]);

My app should always first use the browser default settings. If the color-scheme is changed via a switch in the application, this value should be used and stored in the browser-storage. If the setting was changed for the first time, this value should always be used (and therefore is the prefered color-scheme over the browser-settings).

And last but not least, this setting should again be overwritten when the browser-preference is changed once again.

So as summary: the app should always respect the user-settings set in the browser-preferences but when the user changes the color-scheme in the app itself this settings should prioritized.

Can somebody help me with the combination of these 3 hooks involved (useColorScheme, useToggle, useLocalStorage)?

[rtivital]

To avoid flickering, you need to store value in cookie – https://mantine.dev/theming/dark-theme/#save-color-scheme-in-cookie
There is no way of knowing user preferred color scheme with initial request, so you will have to save this value in a cookie on initial render and then use this value for next requests. There is no way to avoid initial flickering if you want to rely on user preferred color scheme, I can only advise to pick color scheme that you like and use it as initial value and then let user decide which color scheme he wants.

[kwiat1990]

I have the same issue while detecting user’s system preferred color scheme. With tailwindor any other CSS only approaches it should work just fine. JS approach can’t work due how browser handles loading of resources, so I’m thinking about setting base styles like background color based on user’s preferences directly in CSS to prevent FART. And then set Mantine’s color scheme in useEffect.

[kwiat1990]

@rtivital I have pick some thing from this approach: (https://www.mattstobbs.com/remix-dark-mode) to get intiail value for a color scheme but it seems not working with Mantine due to hydration error: react-dom.development.js:86 Warning: Prop className did not match. Server: "mantine-1asblv6 mantine-Burger-burger" Client: "mantine-16lnb61 mantine-Burger-burger". The initial value for theme is computed in a script, which run before Mantine and it set window.theme to the value of user media preferences. Then, when my app is ready I access that value and pass in as the initial value of theme. Is there any way to get rid of this hydration problem?

[rtivital]

The error message is correct: you generate HTML for a specific color scheme on server, and then change that on client before hydration – HTML generated on server will not match.

[kwiat1990]

Thanks for fast response. Then there's absolutely no chance to have this functionality and Mantine at the same time or am I missing something?

[rtivital]

No, I'm not planning to implement this as it will require rewriting all components and will have issues with styles overriding.