Search code examples
cssvue.jsvuetify.jstimeline

Multiple colors for Vuetify v-timeline center line

I need to change the color of the center line in the v-timeline components of the Vuetify framework so that it will be a particular color up-to a certain colored dot and another color afterwards as shown here, is it possible to do so?

The color for the whole line could be changed as follows

.theme--light.v-timeline:before {
    background: red;
}
Solution

  • I think only one way is setting linear-gradient. Because v-timeline divider setting up all the space. Try setting

    background: linear-gradient(180deg, black 0% 50%, gray 50% 100%) !important