Wie kann ich Standardfarben in Vuetify anpassen?

Question

Vielleicht ist mein Problem einfach, aber ich konnte bisher keine Lösung finden. Ich verwende Vuetify in meiner Nuxt-Anwendung. Ich habe das dunkle Thema verwendet. Abhängig von der Theme-Konfiguration der offiziellen Website können wir die primären, sekundären Farben des Themes in die gewünschte Farbe ändern. Als wir jedoch ein dunkles Design 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 class="primary" festlegen können, damit ein Element seine Hintergrundfarbe ändert. Aber ich möchte eine Standardfarbe für Text oder Hintergrund wie folgt festlegen:

body {
    Farbe: var(--v-info-base);
}
/* oder */
#app {
    Farbe: var(--v-info-base);
}

Die Farben meiner Website sind in meiner nuxt.config.js-Datei definiert, wie folgt:

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“
                }
            },
        }
    },

Aber das funktioniert bei mir nicht! ! !

Answer 1

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

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

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

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