Changing active class color in dropdown list

[atpim]

How can I change active class color of the item in dropdown list that is used in Q-Table? The one that is supposedly higlighting columns that are chosen to blue. However somehow in my case they are not higlighted.
I tried using

.q-item.q-router-link--active, .q-item--active {
  color: blue;
}

However it wont work. Whenever it is selected or not the color remains the same.

Here is my table

<q-table

  flat
  bordered
  title="Treats"
  :data="data"
  :columns="columns"
  row-key="name"
  hide-bottom
  class="sticky-header"
    :visible-columns="visibleColumns"
>
      <template v-slot:top>
    <img
      style="height: 50px; width: 50px"
      src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg"
    >

    <q-space />

    <q-select
      v-model="visibleColumns"
      multiple
      outlined
      dense
      options-dense
      :display-value="$q.lang.table.columns"
      emit-value
      map-options
      :options="columns"
      option-value="name"
      options-cover
      style="min-width: 150px"
    />
  </template>
</q-table>

[DarkLite1]

Maybe I’m missing something in your code but your class is setting a color for <q-item> and in your example I can’t find <q-item>. So my guess is that you’re not addressing the correct component.

I could be wrong as I’m just a newbie starting with Vue and Quasar. But I still wanted to help you a bit.

[miguelrod.dev]

Did you ever figure this out?