How to customize chakra-ui theme in gatsby project? – Code Example

To customize chakra-ui theme in gatsby project you will need to shadow gatsby-plugin/theme.js file with your own theme file by extending it. This is different from what we do in case of reactjs project.

Code Example

Open src/@chakra-ui/gatsby-plugin/theme.js file and update its content –

import { extendTheme } from '@chakra-ui/react'
const theme = {
  colors: {
    primary: 'rebeccapurple',
  },
}

export default extendTheme(theme)