Styling active-class in Vuetify

To style a `v-list-item-group` in its active state using Vuetify, you can utilize the `:class` binding along with the `active` prop to apply custom styles. Here’s how you can achieve that:

1. Custom CSS Classes: Define custom styles in your CSS or a

block.

2. Binding Classes: Use the `:class` binding to apply styles conditionally based on the active state.

Here is an example based on your code:

<template>
  <v-list>
    <v-list-item-group v-model="day" color="green" :class="{ 'active-state': isActive }">
      <v-list-item v-for="(item, i) in items" :key="i">
        <v-list-item-content>
          <v-list-item-title v-text="item.day"></v-list-item-title>
          <v-list-item-title v-text="item.title"></v-list-item-title>
          <v-list-item-subtitle v-text="item.date"></v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list-item-group>
  </v-list>
</template>
<script>
export default {
  data() {
    return {
      day: null, // Or whatever initial state you need
      items: [
        { day: 'Monday', title: 'Meeting', date: '2024-01-01' },
        // Add more items as needed
      ],
    };
  },
  computed: {
    isActive() {
      return this.day !== null; // Adjust the condition based on your logic
    },
  },
};
</script>

<style>
.active-state {
  background-color: #e0f7fa; /* Change this to your desired active background color */
}
.active-state .v-list-item {
  color: #00796b; /* Change this to your desired active text color */
}
</style>