Чтобы настроить цвет фона при наведении строки для таблицы v-данных в Vuetify с темной темой, вы можете использовать несколько методов. Вот несколько вариантов:

1. Использование CSS:

   • Вы можете определить собственный класс CSS для эффекта наведения строки и применить его к компоненту v-data-table. Например:

   <style>
   .custom-row:hover {
    background-color: #333333; /* Desired hover background color */
   }
   </style>
   
   <v-data-table class="custom-row">
    <!-- Table content -->
   </v-data-table>

2. Использование слота для предметов:

   • Компонент v-data-table предоставляет слот элемента, который можно использовать для настройки отдельных строк. Вы можете использовать этот слот, чтобы применить собственный цвет фона при наведении курсора на строку. Например:

   <v-data-table>
    <template v-slot:item="{ item }">
      <tr :class="{ 'custom-row': item.isHovered }" @mouseover="item.isHovered = true" @mouseout="item.isHovered = false">
        <!-- Row content -->
      </tr>
    </template>
   </v-data-table>

   В этом примере мы привязываем класс CSS custom-rowк строке на основе свойства isHoveredэлемента. Мы обновляем это свойство, когда мышь входит в строку или покидает ее, чтобы включить эффект наведения.

3. Использование слота строки:

   • Другой вариант — использовать слот строки, предоставленный v-data-table, для настройки рендеринга строк. Вы можете применить собственный цвет фона при наведении курсора на строку. Вот пример:

   <v-data-table>
    <template v-slot:row="{ item, index }">
      <tr :class="{ 'custom-row': item.isHovered }" @mouseover="item.isHovered = true" @mouseout="item.isHovered = false">
        <!-- Row content -->
      </tr>
    </template>
   </v-data-table>

   Аналогично предыдущему методу мы привязываем CSS-класс custom-rowк строке на основе свойства isHoveredэлемента. Мы обновляем это свойство, когда мышь входит в строку или покидает ее, чтобы переключить эффект наведения.