Comment personnaliser les couleurs par défaut dans Vuetify ?
P粉615829742
P粉615829742 2023-08-25 00:02:37
0
1
551

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 ! ! !

P粉615829742
P粉615829742

répondre à tous (1)
P粉982054449

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

Par exemple, dans votrevariables.scssvous 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.

    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!