Customizing Theme

Chakra UI can easily 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.

import Chakra 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)])

❤️ Contribute to this page

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