CODEWITHSUNDEEP
javascriptreactjsnext.jschakra-ui
anonymoususer8893
anonymoususer8893

Reputation: 153

Chakra UI not changing to dark mode in Next.js app

I recently tried to integrate Chakra UI into my Next.js app. I have followed every step in the guide in their docs: https://chakra-ui.com/getting-started/nextjs-guide

However, when I set the initialColorMode to "dark" for the ColorModeScript prop, it does not apply. In fact, when I check the elements in chrome dev tools, my body tag still shows it has the class "chakra-ui-light" and the html tag has the data-theme as light and style="color-scheme: light".

I am not sure why this is the case. Anyone able to help? Here is the code related to my attempt at forcing dark mode:

const config = {
  initialColorMode: "dark",
  useSystemColorMode: false,
};

const theme = extendTheme({ config });

Then I wrap in _app.js with: <ChakraProvider theme={theme}>

document.js like this:

<body>
    <ColorModeScript initialColorMode="dark" />
    <Main />
    <NextScript />
</body>

Edit: I found today that this bug is actually happening in development environment only. When I deploy to Vercel, it does indeed have color mode set to dark. I am still not sure why this is the case.

Upvotes: 9

Views: 5675

Answers (2)

Kritik Sah
Kritik Sah

Reputation: 109

Try clearing your cookies it will work. :)

Upvotes: 1

Lucas Emanuel
Lucas Emanuel

Reputation: 626

I had a similar problem and my solution was to remove "chakra-ui-color-mode" from localstorage and refresh the page.

Upvotes: 34

Related Questions