Within the AppBar.vue component of my Vuetify 3 project, I have noticed a very dark hover effect on the hamburger icon and menu items.
In the official documentation, it mentions that the default hover color should be a light grey, not full black. Can anyone explain why this unexpected change has occurred and suggest how I can adjust it?
I have experimented with various CSS selectors and pseudo-selectors, including using !important and wrapping the element in v-hover set to disabled...
https://i.sstatic.net/k0Ply.png
https://i.sstatic.net/OOjOI.png
<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 have tested is:
@import "@/styles/_variables.scss";
.custom-hover:hover {
background-color: $blue !important;
}