Skip to content

Conversation

06b
Copy link
Contributor

@06b 06b commented Sep 8, 2025

Description

This relates to the request for High Contrast Support #21515.

When forced-colors is active (such as High Contrast Mode in Windows), in Vuetify 3.9.6 it would render VListItem that is a link with the expected system color for the hyperlink.

Screenshot 2025-09-08 163115

However, due to #21958 in Vuetify 3.9.7 the VListItem renders the incorrect expected system colors for a VListItem that is a link or has no action assigned to it as the button system color.
Screenshot 2025-09-08 163154

This pull request corrects this mistake when in forced-colors mode.
Screenshot 2025-09-08 164321

Markup:

<template>

  <v-card class="mx-auto" max-width="400">
    <v-toolbar color="purple">
      <v-btn icon="mdi-menu" />
      <v-toolbar-title>Settings</v-toolbar-title>
      <v-btn icon="mdi-magnify" />
    </v-toolbar>

    <v-list lines="three">
      <v-list-subheader>User Controls</v-list-subheader>
      <v-list-item
        v-for="item in userControls"
        :key="item.value"
        :href="item.href"
        :subtitle="item.subtitle"
        :title="item.title"
      >
        <template #prepend>
          <v-avatar>
            <v-icon :icon="item.icon" />
          </v-avatar>
        </template>
      </v-list-item>
    </v-list>

    <v-divider />

    <v-list
      v-model:selected="settingsSelection"
      lines="three"
      select-strategy="leaf"
    >
      <v-list-subheader>General</v-list-subheader>
      <v-list-item
        v-for="item in settingsItems"
        :key="item.value"
        :subtitle="item.subtitle"
        :title="item.title"
        :value="item.value"
      >
        <template #prepend="{ isSelected, select }">
          <v-list-item-action start>
            <v-checkbox-btn
              :model-value="isSelected"
              @update:model-value="select"
            />
          </v-list-item-action>
        </template>
      </v-list-item>
    </v-list>
  </v-card>

</template>

<script>
  export default {
    data: () => ({
      userControls: [
        { title: 'Content filtering', subtitle: 'Set the content filtering level to restrict appts that can be downloaded', icon: 'mdi-filter' },
        { title: 'Password', subtitle: 'Require password for purchase or use password to restrict purchase', icon: 'mdi-form-textbox-password', href: 'https://example.com' },
      ],

      settingsItems: [
        { value: 'notifications', title: 'Notifications', subtitle: 'Notify me about updates to apps or games that I downloaded' },
        { value: 'sound', title: 'Sound', subtitle: 'Auto-update apps at any time. Data charges may apply' },
        { value: 'widgets', title: 'Auto-add widgets', subtitle: 'Automatically add home screen widgets when downloads complete' },
      ],

      settingsSelection: [],
    }),
  }
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant