[Vuejs]-Vuetify – Change default color for v-text-field type=date icon

Here you go! codepen link

Globally setting dark mode theme

I think you want to do this. Judging by your screenshot, your date modal looks like it is in light mode still… even though you’ve toggled to "dark" mode. If you don’t do this globally, I think you will find yourself marking a lot of individual components as "dark" instead of letting the <v-app> delegate the theme to them.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  created () {
    this.$vuetify.theme.dark = true
    // oooor, do it based on to the browser's settings
    // this.$vuetify.theme.dark = window.matchMedia('(prefers-color-scheme)').media !== 'not all'
  },
})

Basically, Vuetify is… opinionated. They have a lot of scss variables and complex styling. You usually have to go through the front door when you want to change variable colors. Especially in dark mode.

Custom icon color inside of a v-textfield using slots

If you want to customize a specific icon color for one single icon inside of a textfield, you can use the v-textfield‘s slots (documented here) and pass in anything you’d like (for example a v-icon using the color prop)

When implementing a more custom UX, you can use this.$vuetify.theme.dark inside of your component to determine if you should be "light" or "dark"

The icon you’re pointing out is not created by the VTextField. Rather, it’s actually part of the native <input>.

If you prefer to continue using VTextField‘s native <input> for the datepicker, there’s currently no way to change the color of that icon AFAIK, but you could adjust the icon’s background in CSS, using ::-webkit-calendar-picker-indicator as the selector, which allows a couple options as a solution.

Option 1: Lighten background color of icon

You could lighten the icon’s background to gray, which improves the icon visibility in dark mode:

.theme--dark input[type="date"]::-webkit-calendar-picker-indicator {
  background-color: #ccc;
}

demo 1

Option 2: Change icon image

You could also change the image of the icon to a PNG of a bright icon in dark mode:

.theme--dark input[type="date"]::-webkit-calendar-picker-indicator {
  background: url(https://img.icons8.com/cotton/64/000000/calendar.png) no-repeat;
  background-size: 24px 24px;
}

demo 2

Just add one property to your text field which is the dark prop :

  <v-text-field dark type="date" class="text-xs-center ml-2 mr-4" v-model="startDate">
  </v-text-field>