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

user_8261982 0
Viewed 3517

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"
    }
  }
})
chakra-ui reactjs themes
4 Answers

According to this section: https://chakra-ui.com/docs/styled-system/theming/customize-theme#using-theme-extensions

You don't have to pass color='primary' everywhere.

Just create custom theme and then set primary as default color.

This example shows how to set Cyan as default color for every component.

const theme = extendTheme(
  {
    colors: {
      primary: baseTheme.colors.cyan
    },
    breakpoints,
  },
  withDefaultColorScheme({
    colorScheme: 'primary'
  }),
);
user_124520770

You can customize the theme in any possible way :

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

const theme = extendTheme({
  colors: {
    primary: {
      main: "#7bb9e8"
    },
    secondary: {
      main: "#eb7f7f"
    }
  }
});

Then pass this theme to ChakraProvider

//index.js

    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>

And you will be able to use your own colors accessing the theme via useTheme hook:

import { useTheme } from "@chakra-ui/react";
...
  const theme = useTheme();
...
<Button bg={theme.colors.primary.main}>Button</Button>

or override a component styles globally inside the component object

Demo

user_141906900

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

user_100215910

You can set two variants of primary colors with default and _dark property. It will be used depending on actual color mode (light/dark theme).

import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  initialColorMode: 'light',
  semanticTokens: {
    colors: {
      text: {
        default: '#16161D',
        _dark: '#ade3b8',
      },
      primary: {
        default: '#FF0080',
        _dark: '#fbec8f',
      },
})

export default theme
user_138993290
Related