Home>

I am using Vuetify and using it to make a card-text.
As shown in the picture below, the background color in card-text is currently black,
I would like to change it to white or other colors.
Could anyone please tell me?

<template>
<v-card>
  <v-toolbar
      color="primary"
      flat
    >Test
  </v-toolbar>
  <v-card-text>
    <v-subheader>test
    </v-subheader>
    <v-list>
      <v-list-item>
        <v-list-item-title>name
            <v-form v-model="valid">
             <v-container>
                <v-col
                    cols="12"
                    md="4">
                  <v-text-field
                        v-model="name"
                        :rules="nameRules"
                        :counter="10"
                        label="name"
                        required
                        ></v-text-field>
                </v-col>
             </v-container>
            </v-form>
        </v-list-item-title>
      </v-list-item>
    </v-list>
  </v-card-text>
</v-card>
</template>
  • Answer # 1

    v-cardYou can change the background color of the entire card by specifying a color with the color property of the component.
    For example, if you specify the color as follows

    <v-card color="blue lighten-4">
    <-- omitted -->
    </v-card>

    It looks like this.
    Image description

    In this figure, the background color is whitev-listThe component. If you want this part to have the same background color,v-listSpecify the color with the color property of the component.

    <v-card color="blue lighten-4">
    <v-toolbar color="primary" flat>test</v-toolbar>
    <v-card-text>
      <v-subheader>test</v-subheader>
      <v-list color="blue lighten-4">
        <-- omitted -->
      </v-list>
    </v-card-text>
    </v-card>

    This will change the background color of the entire card.
    Image description

    You can specify any css in the color property. For examplecustom-colorIf you define css

    <style scoped>
    .custom-color {
      background-color: aquamarine;
      border-color: aqua;
    }
    </style>

    in the color propertycustom-colorCan be specified.

    <v-card color="custom-color">
    <v-toolbar color="primary" flat>test</v-toolbar>
    <v-card-text>
      <v-subheader>test</v-subheader>
      <v-list color="custom-color">
        <-- omitted -->
      </v-list>
    </v-card-text>
    </v-card>

    Image description

Related articles