Change color items in v-list-item

Question

I have a dropdown with multiple items in it and I'd like to change their appearances. At the moment, I can only change the color of the appended item "Select All" but no the ones under it. Does anyone know how to do this?

<template>
  <v-container fluid>
    <v-select
      v-model="valuesType"
      :items="typeArray"
      label="Category"
      multiple
      flat
      attach
    >
      <template v-slot:prepend-item>
        <v-list-item
          ripple
          @mousedown.prevent
          @click="toggleType"
          class="test elevation-0"
          dense
        >
          <v-list-item-action>
            <v-icon :color="valuesType.length > 0 ? 'var(--yellow)' : ''">
              {{ iconType }}
            </v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title class="select-all"> 
              Select All
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-divider></v-divider>
      </template>
      <template v-slot:selection="{ item, index }">
        <div v-if="valuesType.length === 1">
          <span v-if="index === 0 && valuesType[0].length > 16">
            {{ valuesType[0].slice(0,16) }}... 
          </span>
          <span v-if="index === 0 && valuesType[0].length <= 16">
            {{ valuesType[0] }} 
          </span>
        </div>
        <div v-if="valuesType.length === 2 ">
          <span v-if="index === 0 && valuesType[0].length <= 8">
            {{ valuesType[0] }},&nbsp; 
          </span>
          <span v-if="index === 0 && valuesType[0].length > 8">
            {{ valuesType[0].slice(0,8) }}...,&nbsp; 
          </span>
          <span v-if="index === 1  && valuesType[1].length <= 8">
            {{ valuesType[1] }} 
          </span>
          <span v-if="index === 1 && valuesType[1].length > 8">
            {{ valuesType[1].slice(0,8) }}... 
          </span>
        </div>
        <div v-if="valuesType.length > 2">
          <span v-if="index === 0 && valuesType[0].length <= 10">
            {{ item }},&nbsp; 
          </span>
          <span v-if="index === 0 && valuesType[0].length > 10">
            {{ valuesType[0].slice(0,10) }}...,&nbsp; 
          </span>
          <span
            v-if="index === 1"
            class="grey--text text-caption spanFilters"
          >
            +{{ valuesType.length - 1 }} other(s)
          </span>
        </div>
      </template>
    </v-select>
  </v-container>
</template>

I'd like the items under the "Select All" (the checkboxes and also the hover) to have the same yellow as the "Select All".

Answer 1

Check this codepen The v-checkbox component of vuetify accepts a color prop by which you can change the checkbox's color.

<v-checkbox color="yellow" :input-value="active"></v-checkbox>