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)