V-list-item change .v-list-item--active Background-Color vuetify

Hello all,

I want to change the background-color of a v-list-item in active state, within a v-list-item-group. This should work with the selector .v-list-item-group .v-list-item–active. But if I change the background-color here, the color is not pure. Only if I change the color for font is it OK, but then I can’t read the font. Is this somehow connected?

many greetings,

1 Like

There is a active-class props for <v-list-item-group>. you can use to assign the custom active class.
https://codepen.io/Jayesh_v/pen/eYBjLrq

Thank you for support. :slight_smile:
Here check this: https://codepen.io/ferdifii/pen/rNWqXxv
If you want to configure white background and black font for active-class, the background is still grey.

You need to override the default active class styling on the v-list-item. Here is a pen: https://codepen.io/pen?template=eYZrGPe

Background is still grey because of an opacity of 0.12 of default light theme of active item, you can make that to 0. https://codepen.io/Jayesh_v/pen/OJbaqXa

.theme--light.v-list-item--active:before, .theme--light.v-list-item--active:hover:before, .theme--light.v-list-item:focus:before {
    opacity: 0;
}
4 Likes

Thank you!

you saved my day , thanks