Error: [useColorMode] requires the ColorModeProvider component

[Gabriel Bencomo]

Describe the bug
Colors, fonts and the other options works well but when i try render a button for change the theme color mode prints this error.

I am using remix btw. And everything was working fine.

Expected behavior
I want to change the color mode from light to dark.

Screenshots

[Piotr Monwid-Olechnowicz]

Hey! Thanks for the issue :)

ThemeProvider needs to be at the top, hooks inside.

[Gabriel Bencomo]

Hey! Thanks for the issue :)

ThemeProvider needs to be at the top, hooks inside.

Can you please provide me a example, because i dont understand it.

Sorry for that but i want to resolve that problem.

[Gabriel Bencomo]

Hey! Thanks for the issue :)
ThemeProvider needs to be at the top, hooks inside.

Can you please provide me a example, because i dont understand it.

Sorry for that but i want to resolve that problem.

Problem solved. I just remove node_modules folder and then I did a yarn install.

[Piotr Monwid-Olechnowicz]

Forgive me for that brief response, I was in a rush.

Take a look at the official Remix example using Theme UI:
https://github.com/remix-run/examples/tree/main/theme-ui

Your ThemeProvider should be in root.tsx, because all hooks exported from Theme UI expect to be under the provider.

You might see this pattern in some React libraries:

import { SomethingProvider, useSomething } from 'some-library'

function AppWithProviders() {
  return (
    <SomethingProvider>
      <ActualApp />
    </SomethingProvider>
  )
}

function ActualApp() {
  const something = useSomething()
  
  return <button onClick={() => something.doStuff()}} />
}

[Gabriel Bencomo]

Forgive me for that brief response, I was in a rush.

Take a look at the official Remix example using Theme UI: https://github.com/remix-run/examples/tree/main/theme-ui

Your ThemeProvider should be in root.tsx, because all hooks exported from Theme UI expect to be under the provider.

You might see this pattern in some React libraries:

import { SomethingProvider, useSomething } from 'some-library'

function AppWithProviders() {
  return (
    <SomethingProvider>
      <ActualApp />
    </SomethingProvider>
  )
}

function ActualApp() {
  const something = useSomething()
  
  return <button onClick={() => something.doStuff()}} />
}

Yes! Thanks a lot for responding me.

In fact I was guided by the remix example and that is why I was surprised the useColorMode hook did not work but I think it was problems with dependencies, I am doing a migration from Gatsby to Remix and I only remove node_modules folder and a yarn install and that works for me.

[Piotr Monwid-Olechnowicz]

remove node_modules folder and a yarn install and that works for me.

Classic :D I'm happy to hear it works for you now. Have a great weekend, @gabrielba15.