Wie kann ich Standardfarben in Vuetify anpassen?
P粉615829742
P粉615829742 2023-08-25 00:02:37
0
1
637
<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>
P粉615829742
P粉615829742

Antworte allen(1)
P粉982054449

要实现这一点,您需要重写vuetify的sass变量,在文档中有使用示例

例如,在您的variables.scss中,您可以使用以下代码:

$material-dark: (
  'background': #464994,
  'text': (
     'theme': #944646,
   )
);

这将重写暗模式下的默认背景和文本颜色。

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage