'Choose a default colors between multiple shades in Chakra UI theme

I'm gonna use a primary color with different shades in my Chakra theme. But one of the shades is going to be used more often and I would like to use it as default.

export const theme = extendTheme({
  colors: {
    primary: {
      _default: '#a8d6d3', // THIS IS THE primary.400
      50: '#eef7f6',
      100: '#dcefed',
      200: '#cbe7e5',
      300: '#badedc',
      400: '#a8d6d3',
      500: '#86c6c2',
      600: '#63b6b0',
      700: '#499c97',
      800: '#397975',
      900: '#295754',
    },
  },
});

Instead of using primary.400 over and over, I would like to just use primary.

The _default keyword does not seem to work.

Is there a way to achieve this?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Choose a default colors between multiple shades in Chakra UI theme

Sources

Related Questions