[Bug Report][3.3.10] When setting Blueprints, the v-btn text color is the same as the v-app-bar color so that the text or icon cannot be seen.

[regchiu]

Environment

Vuetify Version: 3.3.10
Vue Version: 3.3.4
Browsers: Chrome 114.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

1. Apply Blueprints.
2. v-app-bar set color="primary" then add v-btn to v-app-bar slot.

Expected Behavior

The v-btn content should be visible.

Actual Behavior

The v-btn content is not visible.

Reproduction Link

https://play.vuetifyjs.com/#...

[websitevirtuoso]

=)))

Everything working.
By default v-btn doesn't have any color and this is expected behavour in vuetify3.
here working example

<template>
  <v-app>
    <v-app-bar color="primary" title="App bar">
      <template #append>
        <v-avatar>
          <v-avatar color="white">
            <span class="text-h5">LY</span>
          </v-avatar>
        </v-avatar>
        <span class="pa-4 text-subtitle-1">Levi Yeh</span>
        <v-btn color="teal" icon="mdi-dots-vertical"></v-btn>
      </template>
    </v-app-bar>
  </v-app>
</template>

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

  const msg = ref('Hello World!')
</script>

Set color to your v-btn

In my project I had the same issue and fixed it via config we can pass default values

defaults: {
    VInput: {
      variant: 'outlined',
      density: 'compact',
    },
    VTextField: {
      variant: 'outlined',
      density: 'compact',
    },
    VTextFieldMini: {
      variant: 'outlined',
      density: 'compact',
      VInput: {
        VField: {
          style: [{ '--v-field-input-padding-top': '8px', '--v-field-padding-bottom': 0 }],
        },
      },
    },
    VSelect: {
      variant: 'outlined',
      density: 'compact',
    },
    VAutocomplete: {
      variant: 'outlined',
      density: 'compact',
    },
    VCombobox: {
      variant: 'outlined',
      density: 'compact',
      VChip: {
        density: 'comfortable',
      },
    },
    VTextarea: {
      variant: 'outlined',
    },
    VCheckbox: {
      color: 'primary',
    },
    VPagination: {
      color: 'primary',
    },
    VCard: { elevation: '3' },
    VCardActions: { VBtn: { variant: 'flat' } },
  },

[websitevirtuoso]

I hope it will help. so this can be closed

[regchiu]

@websitevirtuoso Thank you for your help.
But if I do not set blueprints, v-btn class is not applied text-primary.
https://play.vuetifyjs.com/#eNqlU81uGyEQfhVKD06lsDRyerGcKr310HOrKOTA7o5rWmARjDeOLL97B3btrh0fUvUGM98PDB+PO95vAM3qpfqV+IIbF7qIbMeaCBrh+9Bje7aKnWOzETtT/gh07fy8LWu7gRCNx0RI5WFbsE3nE7IRw+5OLa52yjMmJTtyF1la+f0H5fk1/xJCRVQ64hLBBUvMz5mx7IUOoSwPG1HrSGa2i3eKk5TT8UVxhgYtUIWUGCEUH0lEOyiy90QH3x47g2SvUcdJbVI9+jyvDcJEc8SloD1rrE6JMAhbFOtPhPr2sJS5dSoqL3hdLp7IBi1uWdFOm7rcUtxkD+gNe4D1Kyc6fI2eGXoPYrvWiLbDJHqIaBptiZpNCfJ3QPJk5uOphkkPrzDsaX0CpW1qognIEuBmeKVjcCKspsEpSWFjSFz6SQEhxNXsK1jbsR9dtO27GWWBrlMkSYxiMagJpwPlt/MUj5IjNTaS4gtWKrlGLnmv+BoxpIWUTeuJ1oI1faw8oPTByXuCybjxaBzQZNz9vJpXt7I1CaflCpITdeyeE0QSUfx6YpMT/QarEVkcbj4OFmNNWF2n7HFRe/LD/t3GmnrCl8a3sK3cuY2ke1EkRKT/ABHov7xtcme06fTOWq8mmN339OPpXa3xv9PZkzapXPbxcMj/G21Ry1JP2XF/zctByXpg8Kc/JjaxBA==
So I think it might be a problem with the color applying with blueprints?

[colewerner]

Fwiw the background colors in my v-btn inside of a v-app-bar weren't working the same way that they did in vuetify 2 and I had to change it from:

<v-btn color="white" class="text-primary"

to

<v-btn class="text-primary bg-white"