[Vuejs]-Vuetify v-list-item not changing the text and icon color when it is active

TLTR: add :value="item" to <v-list-item>

I faced with the same problem. The rewriting vuetify CSS is not a good solution. To solve this problem you can must add :value="chanel. Looks like it’s not covered in Vuetify documentation 🤷🏻

<v-list>
        <v-list-item v-for="chanel in chosenGroup" :key="chanel.id" :value="chanel" color="primary">
          Item title
        </v-list-item>
</v-list>

Here is the result

Also, keep in mind that active-color attribute is deprecated. Use color="primary" instead (use any color instead of primary).

i made this hardcode with tailwind

<v-select v-model="selectedItem" :items="items">
              <template #label>
                <LabelRequired text="Цель" />
              </template>

              <template #item="{ item, props }">
                <v-list-item class="relative" v-bind="props">
                  <template #title>
                    <div
                      class="flex items-center text-black px-3 absolute top-0 left-0 w-full h-full bg-white hover:bg-gray-200 hover:text-black transition ease-in-out duration-200 z-[999]"
                      :class="
                        selectedItem === item.value
                          ? 'bg-gray-600 text-white'
                          : ''
                      "
                    >
                      {{ item.title }}
                    </div>
                  </template>
                </v-list-item>
              </template>
            </v-select>

I’m not sure if you just want to change the color to something custom OR if the v-list-item is not working properly. In the case that the component is not showing as it should, be sure to check if you wrapped your app in the "v-app" component and if there are no issues with the build you’re using, maybe going back one version if that’s the case.

Now, if what you want is just to change the color or any other property, in my experience, you need to devtools the f*** out of it. Jokes aside, there’s a lot of classes and styles that are matching those components, so sometimes you need to be reaally specific in your css and add "important!". However, i see the css you were trying is not bad, try not including the "scoped" attr in your style tag, that should do the trick.

I’m assuming your using .Vue files which is the "more correct" way of using vue and vuetify.

so if you make this change you would have something like:

<style>
  .active_list .v-list-group .v-list-item--active {
    color: #f4f4f4 !important;
  }
</style>