Vuetifyのv-card-textの背景色を白もしくは、他の色に変更したい。

Vuetifyをして使用して、card-textを作っています。
下記の写真の通り、card-text内の背景色が現在、黒になっておりますが、
ホワイトやその他の色に変えたいと思っております。
どなたかご教示いただけませんでしょうか？

Vuetify
1<template>
2  <v-card>
3    <v-toolbar
4      color="primary"
5      flat
6    >テスト
7    </v-toolbar>
8
9    <v-card-text>
10      <v-subheader><h3>テスト</h3>  
11      </v-subheader>
12      <v-list>
13        <v-list-item>
14          <v-list-item-title>name
15              <v-form v-model="valid">
16               <v-container>
17                  <v-col
18                    cols="12"
19                    md="4">
20                    <v-text-field
21                        v-model="name"
22                        :rules="nameRules"
23                        :counter="10"
24                        label="name"
25                        required
26                        ></v-text-field>
27                  </v-col>
28                  
29               </v-container>
30              </v-form>
31          </v-list-item-title>
32          
33        </v-list-item>
34      </v-list>
35    </v-card-text>
36  </v-card>
37</template>

行動規範の内容に同意します

回答1件

ベストアンサー

v-cardコンポーネントのcolorプロパティで色を指定するとカード全体の背景色を変更できます。
例えば、以下のように色を指定した場合

vue
1<v-card color="blue lighten-4">
2  <-- 省略 -->
3</v-card>

このようになります。

この図で背景色が白で表示されている部分はv-listコンポーネントです。この部分も同じ背景色にしたい場合はv-listコンポーネントのcolorプロパティで色を指定します。

vue
1<v-card color="blue lighten-4">
2  <v-toolbar color="primary" flat>テスト</v-toolbar>
3  <v-card-text>
4    <v-subheader><h3>テスト</h3></v-subheader>
5    <v-list color="blue lighten-4">
6      <-- 省略 -->
7    </v-list>
8  </v-card-text>
9</v-card>

これでカード全体の背景色が変えられます。

colorプロパティには任意のcssを指定できます。例えば下記のcustom-colorというcssを定義した場合

vue
1<style scoped>
2.custom-color {
3  background-color: aquamarine;
4  border-color: aqua;
5}
6</style>

colorプロパティにcustom-colorを指定することができます。

vue
1<v-card color="custom-color">
2  <v-toolbar color="primary" flat>テスト</v-toolbar>
3  <v-card-text>
4    <v-subheader><h3>テスト</h3></v-subheader>
5    <v-list color="custom-color">
6      <-- 省略 -->
7    </v-list>
8  </v-card-text>
9</v-card>