feat(VDataTable): apply color to internal controls

[J-Sek]

Description

• applies color to checkboxes and dropdowns

resolves #22097
closes #19700

Markup:

<template>
  <v-app theme="dark">
    <v-container>
      <v-btn text="Relaod" @click="fakeReload" />
      <v-data-table
        v-model="selected"
        :headers="headers"
        :items="desserts"
        :loading="reloadInProgress"
        :sort-by="[{ key: 'calories', order: 'asc' }, { key: 'fat', order: 'desc' }]"
        color="primary"
        item-value="name"
        items-per-page="5"
        multi-sort
        show-select
      />
    </v-container>
  </v-app>
</template>

<script setup>
  import { shallowRef } from 'vue'

  const selected = shallowRef(['Cupcake', 'Eclair'])
  const reloadInProgress = shallowRef(false)
  function fakeReload () {
    reloadInProgress.value = true
    setTimeout(() => reloadInProgress.value = false, 2000)
  }

  const headers = [
    { title: 'Dessert (100g serving)', align: 'start', sortable: false, key: 'name' },
    { title: 'Calories', key: 'calories' },
    { title: 'Fat (g)', key: 'fat' },
    { title: 'Carbs (g)', key: 'carbs' },
    { title: 'Protein (g)', key: 'protein' },
    { title: 'Iron (%)', key: 'iron' },
  ]
  const desserts = [
    { name: 'Frozen Yogurt', calories: 200, fat: 6.0, carbs: 24, protein: 4.0, iron: 1 },
    { name: 'Ice cream sandwich', calories: 200, fat: 9.0, carbs: 37, protein: 4.3, iron: 1 },
    { name: 'Eclair', calories: 300, fat: 16.0, carbs: 23, protein: 6.0, iron: 7 },
    { name: 'Cupcake', calories: 300, fat: 3.7, carbs: 67, protein: 4.3, iron: 8 },
    { name: 'Gingerbread', calories: 400, fat: 16.0, carbs: 49, protein: 3.9, iron: 16 },
    { name: 'Jelly bean', calories: 400, fat: 0.0, carbs: 94, protein: 0.0, iron: 0 },
    { name: 'Lollipop', calories: 400, fat: 0.2, carbs: 98, protein: 0, iron: 2 },
    { name: 'Honeycomb', calories: 400, fat: 3.2, carbs: 87, protein: 6.5, iron: 45 },
    { name: 'Donut', calories: 500, fat: 25.0, carbs: 51, protein: 4.9, iron: 22 },
    { name: 'KitKat', calories: 500, fat: 26.0, carbs: 65, protein: 7, iron: 6 },
  ]
</script>