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

In this article I will show you how to customize a default theme of chakra-ui in your react project. You need to add theme attribute in ChakraProvider component in App.js. Edit colors, fonts, icons, margin, paddings and more here.

Code Example

import { extendTheme, ChakraProvider } from '@chakra-ui/react'

const colors = {
  brand: {
    900: '#1a365d',
    800: '#153e75',
    700: '#2a69ac',
  },
}

const theme = extendTheme({ colors })

function App() {
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}

Here we are using extendTheme function of chakra-ui. This function can edit only the properties which we want to change and rest will remain default. So, we changed the brand colors and updated our theme. Next, we added a theme attribute in <ChakraProvider> component for our changes to take effect.