Bagaimana untuk menyesuaikan warna lalai dalam Vuetify?
P粉615829742
2023-08-25 00:02:37
<p>Mungkin masalah saya mudah, tetapi saya tidak dapat mencari penyelesaian sehingga kini. Saya menggunakan <strong>Vuetify</strong> dalam aplikasi Nuxt saya. Saya menggunakan tema gelapnya. Bergantung pada konfigurasi tema tapak web rasmi, kami boleh menukar tema <strong>utama</strong>, <strong>sekunder</strong> atau warna lain dengan warna yang kami mahu. Walau bagaimanapun, apabila kami menetapkan kepada <strong>tema gelap</strong>, teks lalai dan warna latar belakang ditetapkan kepada putih dan hitam. Saya tidak dapat mencari penyelesaian untuk mengubahnya. Saya tahu bahawa kita boleh menetapkan sebagai contoh <code>class="utama"</code> untuk elemen menukar warna latar belakangnya. Tetapi saya mahu menetapkan warna lalai untuk teks atau latar belakang seperti ini: </p>
<p>
<pre class="brush:css;toolbar:false;">body {
warna: var(--v-info-base);
}
/* atau */
#aplikasi {
warna: var(--v-info-base);
}</pre>
</p>
<p>Warna tapak web saya ditakrifkan dalam fail nuxt.config.js saya, seperti ini: </p>
<p>
<pre class="brush:js;toolbar:false;">vuetify: {
Pembolehubah tersuai: ['~/assets/variables.scss'],
tema: {
gelap: benar,
pilihan: { CustomProperties: true },
tema: {
gelap: {
utama: {
asas: "#099b63",
gelapkan1: "#04c279"
},
loghat: "#250032",
menengah: "#97812F",
maklumat: {
asas: "#1FFFF1",
gelapkan1: "#450b5a",
gelapkan2: "#1125c0",
gelapkan3: "#40bfa4"
},
amaran: colors.amber.base,
ralat: colors.deepOrange.accent4,
kejayaan: colors.green.accent3,
sauh: "#1FFFF1"
}
},
}
},</pre>
</p>
<p>Tetapi itu tidak berkesan untuk saya! ! ! </p>
Untuk mencapai ini, anda perlu mengatasi pembolehubah sass vuetify, Terdapat contoh penggunaan dalam dokumentasi
Sebagai contoh, dalam
variables.scss
anda, anda boleh menggunakan kod berikut:Ini akan mengatasi latar belakang lalai dan warna teks dalam mod gelap.