@chakra-ui/theme

Custom Theme Creation

This feature allows you to create a custom theme by extending the default Chakra UI theme. You can define your own color palette, typography, and other design tokens.

const customTheme = extendTheme({
  colors: {
    brand: {
      100: '#f7fafc',
      900: '#1a202c',
    },
  },
});

export default customTheme;

Responsive Design Tokens

This feature allows you to define responsive design tokens such as breakpoints, ensuring your application looks good on different screen sizes.

const customTheme = extendTheme({
  breakpoints: {
    sm: '30em',
    md: '48em',
    lg: '62em',
    xl: '80em',
  },
});

export default customTheme;

Component Style Overrides

This feature allows you to override the default styles of Chakra UI components. You can customize the base styles, sizes, and variants of components to fit your design requirements.

const customTheme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        fontWeight: 'bold',
      },
      sizes: {
        xl: {
          h: '56px',
          fontSize: 'lg',
        },
      },
      variants: {
        solid: {
          bg: 'brand.500',
          color: 'white',
        },
      },
    },
  },
});

export default customTheme;