Vuetify - 更改 v-text-field type=date 图标的默认颜色

Question

我正在过滤两个日期之间的记录，这将显示从后端带来的数据。而不是使用在 Vuetify 的 documentation on date pickers 中找到的常规方式，例如在以下 CodePen 中：

Vuetify v-text-field Date Picker on CodePen

我只是使用v-text-field type="date" 使其更简单，如下面的代码所示：

HTML：

<template>
    <v-layout align-start>
        <v-flex>
            <v-toolbar flat color="grey darken-4">
                <v-toolbar-title>History</v-toolbar-title>
                <v-divider class="mx-4" inset vertical></v-divider>
                <v-spacer></v-spacer>
                From:&nbsp;
                <v-text-field type="date" class="text-xs-center ml-2 mr-4" v-model="startDate"></v-text-field>
                To:&nbsp;
                <v-text-field type="date" class="text-xs-center ml-2 mr-4" v-model="endDate"></v-text-field>
                <v-btn @click="list()" color="primary" class="ml-2 mb-2">Search</v-btn>
            </v-toolbar>
          </v-flex>
    </v-layout>
</template>

JS：

<script>
    import axios from 'axios'
    export default {
        data(){
            return{
                startDate:'',
                endDate:''
            }
        },

        created () {
            this.list();
        },

        methods:{
            list(){
                let me=this;
                let header={"Authorization" : "Bearer " + this.$store.state.token};
                let configuration= {headers : header};
                let url='';
                if(!me.startDate || !me.endDate){
                    url='api/Sales/List';
                }
                else{
                    url='api/Sales/SalesHistory/'+me.startDate+'/'+me.endDate;
                }
                axios.get(url,configuration).then(function(response){
                    me.sales=response.data;
                }).catch(function(error){
                    console.log(error);
                }); 
            }
        }
    }
</script>

它让我可以过滤在两个选定日期之间发生的记录。

我偶然发现的唯一问题是，当切换到深色主题时，看起来像 append-icon（在本例中用作按钮）的默认黑色日历图标不会切换为白色，因为它在 Vuetify 文档的示例中是这样的：

我在 GitHub 上发现有人 requested 用于 在 v-text-field 中添加前置图标的颜色道具（这听起来确实很方便），但请求被标记为 wontfix，而且给出的答案对于他和我正在寻找的东西来说似乎也很糟糕。

如果我添加一个append-icon="date_range"，它只会在默认的黑色日历图标旁边添加另一个图标（颜色正确），它会阻止日期选择器本身工作。我也不能添加readonly 道具（为了避免用户输入日期，它只在输入时用数字填充文本字段，但年份最多可以接受 6 个字符，而它应该只有 4 ) 因为它也会阻止日期选择器工作。

如何切换日历图标的颜色？

Answer 1

给你！ codepen link

全局设置暗模式主题

我想你想这样做。从您的屏幕截图来看，您的日期模式看起来仍然处于浅色模式......即使您已切换到“深色”模式。如果您不在全局范围内执行此操作，我认为您会发现自己将许多单独的组件标记为“dark”，而不是让<v-app> 将主题委托给它们。

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'
  },
})

基本上，Vuetify 是……固执己见。它们有很多 scss 变量和复杂的样式。当您想要更改可变颜色时，您通常必须经过前门。尤其是在黑暗模式下。

使用槽在 v-textfield 内自定义图标颜色

如果您想为文本字段内的单个图标自定义特定的图标颜色，您可以使用v-textfield 的插槽（记录在here）并传入任何您想要的东西喜欢（例如使用 color 属性的 v-icon）

在实现更自定义的 UX 时，您可以在组件内部使用 this.$vuetify.theme.dark 来确定您应该是“浅色”还是“深色”

Answer 2

您指出的图标不是由VTextField 创建的。相反，它实际上是part of the native <input>。

如果您希望继续使用 VTextField 的原生 <input> 作为日期选择器，目前无法更改该图标的颜色 AFAIK，但您可以在 CSS 中调整图标的背景，使用 ::-webkit-calendar-picker-indicator 作为选择器，它允许几个选项作为解决方案。

选项1：减轻图标的背景颜色

您可以将图标的背景变亮为灰色，从而提高图标在深色模式下的可见性：

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

demo 1

选项 2：更改图标图像

您还可以在深色模式下将图标的图像更改为明亮图标的 PNG：

.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

Answer 3

只需在您的文本字段中添加一个属性，即dark 属性：

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