Search code examples
next.jschakra-ui

Why does chakra-ui colorMode become "dark" when I refresh the page in nextjs example app?

I am running 'with-chakra-ui' from the nextjs example.

https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-chakra-ui

Colormode switch does work well. But when I refresh the page, it always returns to the darkmode like this video.

Video Link

I want to remember the color mode.

How can I do this?

Solution

  • Oh, I found why it returned to the darkmode.

    In the _app.tsx, ColorModeProvider option was {useSystemColorMode: true}.

    Change it to false, then the page can remember the color mode.