<lightning-card title="test color">
        <lightning-progress-indicator type="path" current-step="2" variant="shaded" class="custom_css">
            <lightning-progress-step label="Step 1" onclick={launchFlow} value="1"></lightning-progress-step>
            <lightning-progress-step label="Step 2" onclick={launchFlow} value="2"></lightning-progress-step>
            <lightning-progress-step label="Step 3" onclick={launchFlow} value="3"></lightning-progress-step>
            <lightning-progress-step label="Step 4" onclick={launchFlow} value="4"></lightning-progress-step>


import { LightningElement, track, api } from 'lwc';
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';

export default class LightningPath extends LightningElement {
    @api showFirstScreen = false;
    @api showSecondScreen = false;
    @track step = 4;

    launchFlow(event) {
        this.step = event.target.value;
        console.log('Path value', this.step);


.custom_css {

    --lwc-colorbackgroungPathCurrent: red;
    --lwc-colorbackgroungPathIncomplete: purple;
    --lwc-colorBackgroundPathCurrentHover: red;
    --lwc-colorBackgroundPathComplete: red;
    --lwc-colorBackgroundPathCompleteHover: red;
    --lwc-colorBackgroundPathIncompleteHover: purple;

Previouly color was working after summer 23 release it is not working. Please suggest some other way to change the color of steps.

  • can you show your html code please?
    – prem22
    Jul 6 at 10:57

2 Answers 2


Make sure you are using the correct variable names (in camelCase):

Use --lwc-colorBackgroundPathCurrent instead of --lwc-colorbackgroungPathCurrent and --lwc-colorBackgroundPathIncomplete instead of --lwc-colorbackgroungPathIncomplete

  • Hi @Sneh I am facing the same issue and tried your way but still didn't work. Only two of the property --lwc-colorBackgroundPathComplete and --lwc-colorBackgroundPathCompleteHover is working, other doesn't seems to be working. Jul 21 at 8:21

Here is the custom CSS that you need to add to your code.

.custom_css {

    --lwc-colorBackgroundPathActive: green;
    --lwc-colorBackgroundPathActiveHover: gray;

    --lwc-colorBackgroundPathComplete: yellow;
    --lwc-colorBackgroundPathCompleteHover: black;   
    --lwc-colorBackgroundPathIncomplete: white;
    --lwc-colorBackgroundPathIncompleteHover: blue;


For the currently selected path you need to use --lwc-colorBackgroundPathActive and for the hover you need to use --lwc-colorBackgroundPathActiveHover.

For the Incomplete, you can use the --lwc-colorBackgroundPathIncomplete and --lwc-colorBackgroundPathIncompleteHover. I have tried to use this but some css will override it.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .