Выделение выбранного элемента v-списка ⇐ CSS

[Anonymous]

Я только начал использовать Vue/Vuetify для создания интерфейса и сейчас пытаюсь создать стиль для навигационного ящика, то есть списка в нем. Проблема в том, что выбранный элемент выделяется ярко-серым цветом, и текст не читается. Я также не знаю, откуда на самом деле взялся этот стиль, поэтому буду очень признателен за любые подсказки.
Моя боковая панель с панелью навигации:

Код: Выделить всё

import NavItem from '../model/NavItem';
import { getUserStore } from '@/stores/UserStore';
import { ref } from 'vue';
import type { VListItem } from 'vuetify/components';

const props = defineProps()

const userStore = getUserStore()

const notLoggedInItems = ref([
new NavItem(
'Login',
'mdi-login',
'Login',
'someValue',
),
new NavItem(
'Home',
'mdi-logout',
'/',
'home',
)
])









{{ item.title }}

Мой CSS-файл:

Код: Выделить всё

:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
}

.v-app {
display: block;
}

.v-main {
display: block;
}

.v-layout {
--v-scrollbar-offset: 0px;
display: block;
}

.card {
display: block;
}

a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}

body {
/*margin: 0;*/
display: block;
/*place-items: center;*/
/*min-width: 320px;*/
/*min-height: 100vh;*/
}

h1 {
font-size: 3.2em;
line-height: 1.1;
}

button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}

button:hover {
border-color: #646cff;
}

button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}

.card {
padding: 2em;
}

#app {
/*max-width: 1280px;*/
margin: 0 auto;
padding: 2rem;
text-align: center;
display: block;
}

.bg-active {
background-color: rgb(233, 9, 9) !important;
color: rgb(10, 10, 10) !important;
border: #646cff;
opacity: 0.1;
}

@media (prefers-color-scheme: light) {
:root {
color: #8313c4;
background-color: #ffffff;
display: block;
}

button {
background-color: #f9f9f9;
}
}

И мой App.vue

Код: Выделить всё

import { ref } from 'vue'
import SideBar from './components/SideBar.vue'

const drawerOpen = ref(false)






Orion

К этому моменту я, должно быть, уже столько всего перепробовал, что, возможно, сделал все еще хуже, чем было вначале.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -list-item