Change color of Vuetify checkbox in datatable header

Question

I want to customize the colors of Vuetify. So I am using slots of various components to do it. While I am able to achieve custom color for checkbox in header using header.data-table-select slot. The color of checkbox when only some of the rows are selected(but not all) is still grey. Can anyone suggest what I can do to customize its color.

Link to codesanbox

Problem screenshot

Partially working

Answer 1

When value is false, v-simple-checkbox doesn't apply color.
but props.value become true only when all values are selected.

I think this way is better.

<template v-slot:[`header.data-table-select`]="{ props, on }">
      <v-simple-checkbox
        :value="props.value || props.indeterminate"
        v-on="on"
        :indeterminate="props.indeterminate"
        color="primary"
      />
</template>

Answer 2

I fixed it this way.

<template v-slot:header.data-table-select="{ props, on }">
        <v-simple-checkbox
          color="primary"
          v-if="props.indeterminate"
          v-ripple
          v-bind="props"
          :value="props.indeterminate"
          v-on="on"
        ></v-simple-checkbox>
        <v-simple-checkbox
          color="primary"
          v-if="!props.indeterminate"
          v-ripple
          v-bind="props"
          v-on="on"
        ></v-simple-checkbox>
      </template>