How can I set a primary color in Chakra UI theme?

Question

I want to set the primary and secondary color in my theme.js/theme.ts. Is there any way to do that?

I am used to work with Material UI components in my React projects. It is possible to set a palette with 'primary' and 'secondary' there.

I mean something like this:

export const theme = createTheme({
  palette: {
    primary: {
      main: "#7bb9e8"
    },
    secondary: {
      main: "#eb7f7f"
    }
  }
})

Answer 1

As soon as you have defined all color's shades, you can use your custom color as a component's colorSheme:

const theme = extendTheme({
   colors: {
     primary: {
      main: "#7bb9e8",
      50: "#e3f2fd",
      100: "#bbdefb",
      200: "#90caf9",
      300: "#64b5f6",
      400: "#42a5f5",
      500: "#2196f3",
      600: "#1e88e5",
      700: "#1976d2",
      800: "#1565c0",
      900: "#0d47a1"
    }
  }
});

And your component :

<Button colorScheme="primary">Button</Button>

Demo