Unable to use custom theme colors with extendTheme in NextJS project

[spidertwin2]

Hello :)

I am trying to define a custom color palette in theme.js. But I cannot access the colors in any component.

theme.js

import { extendTheme } from "@chakra-ui/core";

const colors = {
  brown: {
    50: "#c6b7a2",
    100: "#442727",
  },
  blue: {
    50: "#30475e",
  },
  gray: {
    50: "#f7f7f7",
    100: "#e6e6e6",
    200: "#7f7f8a",
  },
};

const fonts = {
  body: "system-ui, sans-serif",
  heading: "Georgia, serif",
  mono: "Menlo, monospace",
};

const customTheme = extendTheme({
  colors,
  fonts,
});

export default customTheme;

app.js

import "../styles/global.css";
import "../styles/Home.module.css";
import { ChakraProvider } from "@chakra-ui/core";
import customTheme from "../styles/theme";

const App = ({ Component, pageProps }) => {
  return (
    <>
      <ChakraProvider resetCSS theme={customTheme}>
        <Component {...pageProps} />
      </ChakraProvider>
    </>
  );
};

export default App;

DarkSection.js

import { Box, useColorModeValue } from "@chakra-ui/core";

const DarkSection = ({ children }) => (
  <Box
    bg={useColorModeValue("brown.100", "white")}
    color={useColorModeValue("white", "brown.100")}
  >
    {children}
  </Box>
);

export default DarkSection;

in DarkSection.js brown.100 is not working.

Thanks!

[Fel-o]

same for me

[Behanzin416]

Based on the page below you need to update your dependencies, from what I can see in your code, you are importing your components from @chakra-ui/core
https://chakra-ui.com/docs/migration

[spidertwin2]

I updated the dependencies, but am getting the following error-

error - ./node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js:4:0
Module not found: Can't resolve '@emotion/core'
null

package.json

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
  },
  "dependencies": {
    "@chakra-ui/icons": "^1.0.0-rc.8",
    "@chakra-ui/react": "^1.0.0",
    "@emotion/react": "^11.1.1",
    "@emotion/styled": "^10.0.27",
    "@popperjs/core": "^2.5.4",
    "@react-native-community/netinfo": "^5.9.7",
    "aws-amplify": "^3.3.7",
    "framer-motion": "^2.9.4",
    "next": "10.0.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "styled-components": "^5.2.1",
    "styled-system": "^5.1.5"
  },
  "devDependencies": {
    "eslint": "^7.13.0",
    "eslint-config-standard": "^16.0.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.21.5"
  }
}

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "displayName": true,
        "preprocess": false,
        "ssr": true
      }
    ]
  ]
}

[spidertwin2]

npm i @emotion/styled@11.0.0
solved my error with @emotion/core. Seems like the older versions of @emotion/styled were using @emotion/core as a dependency.

@Behanzin416, your suggestion worked perfectly! Thank you.