Comment personnaliser les couleurs par défaut dans Vuetify ?

Question

Mon problème est peut-être simple, mais je n'ai trouvé aucune solution jusqu'à présent. J'utilise Vuetify dans mon application Nuxt. J'ai utilisé son thème sombre. En fonction de la configuration du thème sur le site officiel, nous pouvons modifier les couleurs primaire, secondaire ou d'autres couleurs avec la couleur souhaitée. Cependant, lorsque nous avons choisi un thème sombre, les couleurs par défaut du texte et de l'arrière-plan ont été définies sur le blanc et le noir. Je ne trouve aucune solution pour les changer. Je sais que nous pouvons définir par exemple class="primary" pour qu'un élément change sa couleur d'arrière-plan. Mais je souhaite définir une couleur par défaut pour le texte ou l'arrière-plan comme ceci :

body {
    couleur : var(--v-info-base);
}
/* ou */
#application {
    couleur : var(--v-info-base);
}



Les couleurs de mon site internet sont définies dans mon fichier nuxt.config.js, comme ceci : 


vuetify : {
        CustomVariables : ['~/assets/variables.scss'],
        thème: {
            sombre : vrai,
            options : { customProperties : true },
            thèmes : {
                sombre: {
                    primaire: {
                        base : "#099b63",
                        assombrir1 : "#04c279"
                    },
                    accent : "#250032",
                    secondaire : "#97812F",
                    Info: {
                        base : "#1FFFF1",
                        darken1 : "#450b5a",
                        assombrir2 : "#1125c0",
                        darken3 : "#40bfa4"
                    },
                    avertissement : colors.amber.base,
                    erreur : couleurs.deepOrange.accent4,
                    succès : couleurs.green.accent3,
                    ancre : "#1FFFF1"
                }
            },
        }
    },



Mais ça ne marche pas pour moi ! ! ! 

Answer 1

Pour y parvenir, vous devez remplacer les variables sass de vuetify, Il existe des exemples d'utilisation dans la documentation

Par exemple, dans votre variables.scss vous pouvez utiliser le code suivant :

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

Cela remplacera les couleurs d'arrière-plan et de texte par défaut en mode sombre.