chakra ui custom theme doesn't work at all in my next js project

Asked 15/5, 2022 at 8:18 Answered 5/7, 2023 at 15:14

Solved reactjs typescript next.js chakra-ui

I'm trying to build nextjs project with chakra UI, but my custom theme doesn't working at all, I've tried everything in chakra docs, even custom color which I've added doesn't work, but default colors of the chakra works correctly, I wanna info that I've setup dark/light mode using chakra docs, if it has something to to with my problem

My theme.js file

import { extendTheme } from "@chakra-ui/react";
import { mode } from "@chakra-ui/theme-tools";

const styles = {
  global: (props) => ({
    body: {
      bg: mode("#a8dadc", "#006d77")(props),
      color: mode("#006d77", "#a8dadc")(props),
    },
  }),
};

const colors = {
  primary: "#e29578",
};

const theme = extendTheme({ styles, colors });
export default theme;

My index.tsx file

import {
  Box,
  Button,
  useColorMode,
  Text,
} from "@chakra-ui/react";
import type { NextPage } from "next";
import Head from "next/head";


const Home: NextPage = () => {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1>Home Page</h1>
      <Box mb={4}>This boxs style will change based on the color mode.</Box>
      <Button onClick={toggleColorMode} color="primary">
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
      <Text fontSize="6xl" color="primary">
        {" "}
        Custom color not working
      </Text>
    </div>
  );
};

export default Home;

My _app.tsx file

import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";

import { Chakra } from "../components/wrappers/Chakra";
import theme from "../libs/theme";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <Chakra cookies={pageProps.cookies}>
        <Component {...pageProps} />
      </Chakra>
    </ChakraProvider>
  );
}

export { getServerSideProps } from "../components/wrappers/Chakra";

export default MyApp;

Cenogenesis answered 15/5, 2022 at 8:18 Comment(0)

I have the same issue!

I've noticed that there are some default css variables attached to :root an the ChakraProvider is not able to override them by default, so I've set the cssVarsRoot as a workarround.

  <ChakraProvider theme={theme} cssVarsRoot="body">

Amerigo answered 13/6, 2022 at 13:39 Comment(0)

I’ve had a very similar (maybe the same) problem.

The default Chakra theme (CSS custom properties) kept overriding my custom theme. Upon further investigation, it appears to me that there’s a proper theme inlined in the HTML received from Next SSR, but the default theme seems to get injected in the <style data-emotion="css-global" after the hydration for some reason.

The workaround @Mist suggested works because of CSS custom properties inheritance.

The proper thing to do here though is to use the CacheProvider as (quite confusingly!¹) outlined here:

import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'

function MyApp({ Component, pageProps }) {
  return (
    <CacheProvider>
      <ChakraProvider>
        <Component {...pageProps} />
      </ChakraProvider>
    </CacheProvider>
  )
}

export default MyApp

¹ The official docs are confusing because it’s inside the “App Directory Setup” section, while it apparently applies to the classic src directory structure as well.

Flyspeck answered 30/3, 2023 at 17:34 Comment(1)

I'm facing the same issue and have tried both yours and mist's answer, none works :( This works <Button bg="brand.100">Welcome</Button> But this doesn't <Button colorScheme="brand">Click me</Button> – Hypoacidity 13/4, 2023 at 14:10

In my case, i'm using next 13.4.8 and the <CacheProvider> is actually causing issues I simple removed it and it works

Here's my ThemeProvider file:

'use client'

import {
  ChakraProvider,
  ColorModeScript,
  StyleFunctionProps,
  extendTheme,
} from '@chakra-ui/react'
import { mode } from '@chakra-ui/theme-tools'

const config = {
  initialColorMode: 'dark',
  useSystemColorMode: false,
}

const theme = extendTheme({
  config,
  styles: {
    global: (props: StyleFunctionProps) => ({
      body: {
        bg: mode('#fff', '#000')(props),
      },
    }),
  },
})

export default function ThemeProvider({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      <ChakraProvider theme={theme}>{children}</ChakraProvider>
    </>
  )
}

And then in your Root Layout in the app/ directory:


import ThemeProvider from '@/chakra/ThemeProvider'
import './globals.css'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang='en'>
      <head />
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

Pat answered 5/7, 2023 at 15:14 Comment(0)

Recommended topics

Hot tags