src/components/LeftMenuItem.vue

@@ -21,7 +21,7 @@ const itemComputed = computed(() => {
 </script>
 <template>
     <QItem
-        active-class="bg-hover"
+        active-class="bg-vn-hover"
         class="min-height"
         :to="{ name: itemComputed.name }"
         clickable

src/css/app.scss

@@ -4,7 +4,8 @@
 
 body.body--light {
     --font-color: black;
-    --vn-section-color: #e0e0e0;
+    --vn-section-color: #f5f5f5;
+    --vn-section-hover-color: #b9b9b9;
     --vn-page-color: #ffffff;
     --vn-text-color: var(--font-color);
     --vn-label-color: #5f5f5f;
@@ -19,6 +20,7 @@ body.body--light {
 body.body--dark {
     --vn-page-color: #222;
     --vn-section-color: #3d3d3d;
+    --vn-section-hover-color: #747474;
     --vn-text-color: white;
     --vn-label-color: #a8a8a8;
     --vn-accent-color: #424242;
@@ -71,8 +73,9 @@ select:-webkit-autofill {
 .bg-vn-section-color {
     background-color: var(--vn-section-color);
 }
-.bg-hover {
-    background-color: #666666;
+
+.bg-vn-hover {
+    background-color: var(--vn-section-hover-color);
 }
 
 .color-vn-label {
@@ -183,8 +186,6 @@ select:-webkit-autofill {
     justify-content: center;
 }
 
-/* q-notification row items-stretch q-notification--standard bg-negative text-white */
-
 .q-card,
 .q-table,
 .q-table__bottom,