Customizing Theme

Chakra UI can be customized by adding your desired values to the Chakra plugin.

Extending theme object#

In this example, we create an example theme object in a file called custom-theme.js and use the plugin to extend the Chakra UI theme. Create a theme object to include custom color, typography, and layout values.

//  custom-theme.js
export default {
  breakpoints: ['30em', '48em', '62em', '80em'],
  fonts: {
    heading: '"Avenir Next", sans-serif',
    body: 'system-ui, sans-serif',
    mono: 'Menlo, monospace'
  },
  colors: {
    brand: {
      50: '#daffff',
      100: '#b1fbfb',
      200: '#85f7f7',
      300: '#58f3f3',
      400: '#31f0f0',
      500: '#1ed7d7',
      600: '#0ca7a7',
      700: '#007777',
      800: '#004949',
      900: '#001a1a',
    }
  },
}

In your main.js file, you can then add your custom theme object by passing it in the extendTheme option.

Note

Doing this will prioritize your custom theme values over the default values in Chakra UI's default theme. So any clashing key names will be recursively overwritten with your own.

import Chakra, { CThemeProvider } from '@chakra-ui/vue'
import customTheme from 'custom-theme.js'

Vue.use(Chakra, {
  extendTheme: customTheme
})

new Vue({
  el: '#app',
  render: (h) => h(CThemeProvider, [h(App)])
}).$mount()

In Nuxt.js#

In your nuxt.config.js file, you can then add your custom theme object by passing it in the extendTheme option.

// Import your customTheme object
import customTheme from 'custom-theme.js'
export default {
  // ...
  chakra: {
    extendTheme: customTheme
  },
  // ...
}

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!