Enable Vuetify 3 v-data-table-server loading progress bar colors and row hover

I couldn't enable theme colors in data tables. It works fine on Vuetify 2.0, but I'm using Vuetify > 3.0 and it's not working.

Here is a basic example.

Vuetify.js

// Styles
import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";

// Composables
import { createVuetify } from "vuetify";
import * as labs from "vuetify/labs/components";

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
  components: {
    ...labs,
  },
  theme: {
    themes: {
      light: {
        colors: {
          primary: "#1867C0",
          secondary: "#5CBBF6",
        },
      },
    },
  },
});

App.vue

<v-data-table-server :headers="headers" :items="items" :loading="true">
</v-data-table-server>

Theme color does not work.

Also row hover does not work.

Here is the full source code at codesandbox.

Solution

At the moment (Vuetify 3.1.9), you can set the color of the progress bar in v-data-table-server by setting the :loading property to a color name (instead of true):

const loadItems = async (options) => {
  loading.value = 'primary'
  serverItems.value = await loadData(options)
  loading.value = false
}

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          primary: "#c6f714",
          secondary: "#04d9ff",
        },
      },
    },
  },
})
const app = {
  setup(){
    const loading = ref(false)
    const serverItems = ref([{id: 1, name: 'name 1'}])
    setInterval(() => loading.value = ['primary', 'secondary', '#7d12ff'][Math.random() * 3 |0], 500)
    
    return {
      itemsPerPage: ref(2),
      headers: [{key: 'id', title: 'ID'},{key: 'name', title: 'Name'}],
      totalItems: 42,
      serverItems,
      loading
    }
  }

}
createApp(app).use(vuetify).mount('#app')

.v-theme--light.v-data-table > .v-table__wrapper > table > tbody > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) > td {
  background: #eee;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.9/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.9/dist/vuetify-labs.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-data-table-server
    :items-per-page="itemsPerPage"
    :headers="headers"
    :items-length="totalItems"
    :items="serverItems"
    :loading="loading"
    item-title="name"
    item-value="name"
  ></v-data-table-server>
  
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.9/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.9/dist/vuetify-labs.js"></script>

As to row hover, yes, it does not seem to be implemented yet, at least I can't find it in the sources. The adjusted version of Vuetify 2 CSS class would be:

.v-theme--light.v-data-table > .v-table__wrapper > table > tbody
> tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) 
> td {
  background: #eee;
}

Not sure if the :not classes still work as intended.