javascript - Vuetify: how to modify the step's default color?

I am using the Vuetify's Stepper ponent.

By default, the step's color is blue:

Corresponding piece of code is:

<v-stepper-step :plete="e1 > 1" step="1">Name of step 1</v-stepper-step>

Live test on Codepen.

I am using the Vuetify's Stepper ponent.

By default, the step's color is blue:

Corresponding piece of code is:

<v-stepper-step :plete="e1 > 1" step="1">Name of step 1</v-stepper-step>

Live test on Codepen.

Share Improve this question asked Sep 19, 2018 at 7:11 Billal BEGUERADJ 22.8k45 gold badges123 silver badges140 bronze badges

Have you used a custom theme ? – laruiss Commented Sep 19, 2018 at 7:14
No, I am not using a custom theme, all is set to the default theme @laruiss – Billal BEGUERADJ Commented Sep 19, 2018 at 7:16

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

You can simply pass a color to color attribute on v-stepper-step ponent.

<v-stepper-step color="red">Step 1</v-stepper-step>

Custom theme colors e.g. color="success" will work as well.

You can overwrite the default color with CSS. The element is v-stepper__step__step .primary :

.v-stepper__step__step.primary {
    background-color: red !important;
    border-color: red !important;
}