Wie kann ich Standardfarben in Vuetify anpassen?
P粉615829742
2023-08-25 00:02:37
<p>Vielleicht ist mein Problem einfach, aber ich konnte bisher keine Lösung finden. Ich verwende <strong>Vuetify</strong> in meiner Nuxt-Anwendung. Ich habe das dunkle Thema verwendet. Abhängig von der Theme-Konfiguration der offiziellen Website können wir die <strong>primären</strong>, <strong>sekundären</strong> Farben des Themes in die gewünschte Farbe ändern. Als wir jedoch ein <strong>dunkles Design</strong> einstellten, wurden die Standardtext- und Hintergrundfarben auf Weiß und Schwarz eingestellt. Ich kann keine Lösung finden, sie zu ändern. Ich weiß, dass wir zum Beispiel <code>class="primary"</code> festlegen können, damit ein Element seine Hintergrundfarbe ändert. Aber ich möchte eine Standardfarbe für Text oder Hintergrund wie folgt festlegen: </p>
<p>
<pre class="brush:css;toolbar:false;">body {
Farbe: var(--v-info-base);
}
/* oder */
#app {
Farbe: var(--v-info-base);
}</pre>
</p>
<p>Die Farben meiner Website sind in meiner nuxt.config.js-Datei definiert, wie folgt: </p>
<p>
<pre class="brush:js;toolbar:false;">vuetify: {
benutzerdefinierteVariablen: ['~/assets/variables.scss'],
Thema: {
dunkel: wahr,
Optionen: {customProperties: true },
Themen: {
dunkel: {
primär: {
Basis: „#099b63“,
dunkler1: „#04c279“
},
Akzent: „#250032“,
sekundär: „#97812F“,
die Info: {
Basis: „#1FFFF1“,
dunkler1: „#450b5a“,
dunkler2: "#1125c0",
Darken3: „#40bfa4“
},
Warnung: farben.amber.base,
Fehler: farben.deepOrange.accent4,
Erfolg: farben.grün.akzent3,
Anker: „#1FFFF1“
}
},
}
},</pre>
</p>
<p>Aber das funktioniert bei mir nicht! ! ! </p>
要实现这一点,您需要重写vuetify的sass变量,在文档中有使用示例
例如,在您的
variables.scss
中,您可以使用以下代码:这将重写暗模式下的默认背景和文本颜色。