The page first loads with the initialColorMode set (default = 'light')

[iBruns]

Description

When the browser loads an UI written with Chakra there is a first load with the initialColorMode set, and then it switches to the system/chosen by user color.

Problem Statement/Justification

1- I believe it should be expected to load right away with the system color or the one chosen by the user. Some sites that work first loading the system color mode include: github.com, facebook.com, google.com

2- I think it makes more sense the preferred color stored in storage should override the system color after the first access, but it is not possible with the current api, you either have the theming along with the system or along with the stored value, we can't have the system only in the first access by default. These same websites work this way.

I think it'd be a great change to Chakra because the majority of the most accessed sites work this way.

Proposed Solution or API

I've read through the code but I am not confident enough to make changes just yet, but I suppose if the storage was accessed before the initialColorMode is set, and setting it in advance, it should solve the 1st problem.

Thanks for reading this proposal until here! 🚀

Alternatives

No response

Additional Information

No response

[segunadebayo]

Hi @lil-newty,

This sounds interesting. I think @takethefake can give a better perspective to this.

• Are you using the color mode blocking script?
• When you say "The page first loads with the initialColorMode set (default = 'light')", do you mean the styles load with the flash of white? or the value (via console.log...) starts with a light value?

It'll help to see a reproduction of this as well.

[primos63]

I believe this is a duplicate of #5046. While 5046 talks about useColorModeValue, it's the same problem as this where the components render twice and produce the white flash. I've triaged the issue and will have a fix for this shortly.

Thanks for the detailed write-up. I will close this in favor of the earlier issue.

[iBruns]

@segunadebayo yeah, I meant this exact flash! @primos63 , thank you for tackling this issue!

The demonstration about the 2nd change proposal:
https://imgur.com/a/1EXfupg

steps:
-set the theme config as follows:

const config: ThemeConfig = {
    initialColorMode: 'light',
    useSystemColorMode: true,
};

-open the application in a clean storage (in this case private window)
-set another theme preference other than my system color
-reload the page
-It is again system color mode even though the user's choice is stored

expected:
Even though it's set to use system color mode, it makes more sense to prevail the user's choice after set by them.

[primos63]

Yes, that is the way useSystemColorMode is suppose to work. To achieve what you are looking for, you need to set useSystemColorMode to false and initialColorMode to system. It will default to the system color mode and if the user changes the color mode that one will be taken over the system's.

The comments in the code detail the settings.

[iBruns]

@primos63 my bad, thank you!