Change hover colour in Vuetify 3

In my AppBar.vue component of my Vuetify 3 project, the hamburger icon and menu items have a very dark hover effect on them.

In the docs, the default hover is a light grey not full black, does anyone know why this has happened and how I can change it, please?

I've tried several CSS selectors and pseudo selectors including adding !important, and wrapping the element in v-hover set to disabled...

<template>
  <v-app>
    <v-app-bar :elevation="2">
      <!-- eslint-disable-next-line vue/valid-v-on -->

      <v-app-bar-nav-icon @click="drawer = !drawer"> </v-app-bar-nav-icon>
      <v-app-bar-title>The Candidate Consultants</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item
          class="custom-hover"
          v-for="item in menuItems"
          :key="item.title"
          @click=""
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

One of the CSS selectors I tried:

@import "@/styles/_variables.scss";
.custom-hover:hover {
  background-color: $blue !important;
}

I think this happens when there is no theme, not sure why it happens in your example.

The hover change is set on an element with the *__overlay class and it is defined by its opacity, which is set through the variables --v-hover-opacity and --v-theme-overlay-multiplier, i.e.:

v-list-item:hover > .v-list-item__overlay {
  opacity: calc(var(--v-hover-opacity)*var(--v-theme-overlay-multiplier));
}

The variables should be provided by the theme:

.v-theme--light{
  --v-hover-opacity: 0.04;
  --v-theme-overlay-multiplier: 1;
}

You could (re-)set them yourself, but I would rather figure out what is wrong with your theme. Do you have an idea what that might be?

Note that if I put your code into a snippet, it works as expected:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    return {
      drawer: ref(true),
      menuItems: ref([{title: 'item 1'}, {title: 'item 2'}])
    }
  }

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

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.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-app-bar :elevation="2">
      <v-app-bar-nav-icon @click="drawer = !drawer"> </v-app-bar-nav-icon>
      <v-app-bar-title>The Candidate Consultants</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item
          class="custom-hover"
          v-for="item in menuItems"
          :key="item.title"
          @click=""
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </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/dist/vuetify.min.js"></script>