How to configure Chakra UI advance theming in ReactJS

Chakra UI’s advanced theming allows you to customize the look and feel of your application by creating a custom theme. With Chakra UI, you can define custom colors, fonts, spacing, and more, to create a cohesive design system. By wrapping your app with the ChakraProvider and leveraging the theme object, you can easily access and apply your custom theme throughout your components, providing a consistent and personalized user experience.

Table of contents

Install Chakra UI

Make sure you have Chakra UI installed in your project. You can do this by running the following command:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Create a custom theme file

Create a file called theme.js or theme.ts in your project’s directory. This file will contain your custom theme configuration. Here’s an example of how it can look:

// theme.ts
import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  colors: {
    brand: {
      50: "#f7fafc",
      100: "#edf2f7",
      // ... add more color shades
    },
  },
  fonts: {
    heading: "Inter, sans-serif",
    body: "Roboto, sans-serif",
  },
  // ... add more theme configuration options
});

export default theme;

In the example above, we’re extending the default Chakra UI theme and adding custom colors and fonts.

Wrap your application with ChakraProvider

In your main App.js or App.tsx file, import the ChakraProvider and wrap your application with it. Pass your custom theme as a prop to the provider:

// App.tsx

import { ChakraProvider } from "@chakra-ui/react";
import theme from "./theme";

function App() {
  return (
    <ChakraProvider theme={theme}>{/* Your app components */}</ChakraProvider>
  );
}

export default App;

Start using the custom theme

With the ChakraProvider in place, you can now use the custom theme across your application. You can access theme values using the useTheme hook or by importing the theme object directly. Here’s an example:

// SomeComponent.ts

import { Box, useTheme } from "@chakra-ui/react";

function SomeComponent() {
  const theme = useTheme();

  return (
    <Box bg={theme.colors.brand[100]} color="white">
      This is a styled box with a custom background color.
    </Box>
  );
}

export default SomeComponent;

In the example above, we’re accessing the custom color value brand.100 from the theme and using it as the background color of the Boxcomponent.

That’s it! You’ve now configured advanced theming in Chakra UI using a custom theme file. You can continue to expand your theme configuration by modifying other properties such as spacing, breakpoints, shadows, etc., according to your requirements.

Add Custom Design Tokens

Define your custom design tokens: Within the theme file, add your custom design tokens such as colors, fonts, spacing, shadows, etc. For example:

// theme.ts

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  colors: {
    primary: "#FF0000",
    secondary: "#00FF00",
  },
  fonts: {
    heading: "Inter, sans-serif",
    body: "Roboto, sans-serif",
  },
  spacing: {
    2: "8px",
    4: "16px",
    // ... add more spacing values
  },
  shadows: {
    outline: "0 0 0 3px rgba(0, 0, 0, 0.3)",
    // ... add more shadow values
  },
  // ... add more design tokens
});

export default theme;

In the example above, we’re using the custom color value primary, custom spacing value 4, and custom shadow value outline from the theme to style the Box component. By following these steps, you can easily add and utilize your custom design tokens in Chakra UI, allowing for consistent and controlled styling across your application.

Congratualition you followed all way long 🎉 👏!!