How Can I change the background color of the active steps?

[oguzkaganeren]

I want to change the icon background color. How can I do that? (I guess it broke after chakra update)

[rafaelcastan]

Hi, I have found a solution for this, in your theme file create a custom theme for the component this way:

const Steps = {
  ...StepsStyleConfig,
  baseStyle: (props: any) => {
    return {
      stepIconContainer: {
        ...StepsStyleConfig.baseStyle(props).stepIconContainer,
        _activeStep: {
          bg: "red",
        },
      },
    };
  },
};

[oguzkaganeren]

It worked but when apply custom theme, then it turns like this

[rafaelcastan]

Have you tried to set the orientation property to horizontal?

Edit:

I have take a look, and appears that the Step component is setting the orientation property to vertical on screen resize and not change it back to horizontal, you can use chakra useBreakpointValue to overwrite it

[oguzkaganeren]

const CustomSteps = {
  ...StepsStyleConfig,
  baseStyle: (props:any) => ({
    ...StepsStyleConfig.baseStyle(props),
    stepIconContainer: {
      ...StepsStyleConfig.baseStyle(props).stepIconContainer,
      _activeStep: {
        bg: 'red',
      },
    },
  }),
};
```    Thanks a lot, I fixed.

[danielbuechele]

I am experiencing the same issue. While customizing the color of the active step fixes the problem, I think this still is a bug, that incorrectly in light mode, the dark mode background color for the active step is used.

[Aichnerc]

Had same issue.

Adding that to the theme did work for me.

Steps: {
  ...StepsStyleConfig,
  baseStyle: (props) => ({
    ...StepsStyleConfig.baseStyle(props),
    stepIconContainer: {
      ...StepsStyleConfig.baseStyle(props).stepIconContainer,
      _activeStep: {
        ...StepsStyleConfig.baseStyle(props).stepIconContainer._activeStep,
        bg: "rgb(224, 231, 239)", // Default color for light mode
      },
    },
  }),
},