ColorModeScript bug

[oSethoum]

Describe the bug
ColorModeScript not using the initial value provided but always using system default value.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Microsoft Edge
• Version 107.0.1418.52: November 17, 2022

[fabien-ml]

Hi, have you reset the browser cache before making change in the IDE ?

[oSethoum]

@fabien-ml Yes, and I also tried incognito mode and a completely new browser (brave).

[fabien-ml]

I don't have that problem, what version of hope-ui are you using ?

[oSethoum]

Am using version 1.0.0-next.8, also can you make a template sandbox for hope-ui to make it easy to fork it and reproduce the issues?

[fabien-ml]

Looks like it works with SolidStart but not a Solidjs app

[fabien-ml]

Am using version 1.0.0-next.8, also can you make a template sandbox for hope-ui to make it easy to fork it and reproduce the issues?

I will create a codesandbox and update the issues template

[fabien-ml]

I'm facing some weird stuff on this. The fix that i've done works in the library monorepo but not when published on npm

[oSethoum]

@fabien-ml am not sure what causing the issue, for now am using a hack which is to set the localStorage value manually.

[fabien-ml]

Looks like the ColorModeScript run in SolidStart but not in a SolidJs app.

As a quick fix I can add an initialColorMode props to HopeProvider but you will have to set it in both place (ColorModeScript and HopeProvider)

[oSethoum]

@fabien-ml I think it would be good to include it in HopeProvider or in the theme like mantine does and let the developer handle how they want to switch or store the color mode.

[fabien-ml]

@oSethoum i've made the fix in 1.0.0-next.11, however i'm not satisfied because the DX is not that good.

You have to do:

<>
  <ColorModeScript initialColorMode="dark" />
  <HopeProvider initialColorMode="dark" >
    <App />
  </HopeProvider>
</>

The ColorModeScript is mostly needed in SolidStart to not have a "flash of light mode" on the first render.

[oSethoum]

@fabien-ml Thanks for the quick fix, what if ColorModeScript will a child of HopeProvider and it inherits the initialColorMode from the context? would that be better?

[fabien-ml]

The problem is that ColorModeScript should be added before the content of your app.
If it's in HopeProvider, depending on where you put the component, it's not guaranteed that HopeProvider is the first thing that render when your app start.

[oSethoum]

@fabien-ml Yeah that's true, another way to do it is as a boolean property to HopeProvider called withColorModeScript since it's important to be rendered before the content of the app.