Nuxt + Vuetify. Comment appliquer des couleurs de thème

Question

J'utilise un projet Nuxt.js + Vuetify.js

En regardant le fichier assets/style/app.styl on a

// Import and define Vuetify color theme
// https://vuetifyjs.com/en/style/colors
@require '~vuetify/src/stylus/settings/_colors'
$theme := {
  primary:     $blue.darken-2
  accent:      $blue.accent-2
  secondary:   $grey.lighten-1
  info:        $blue.lighten-1
  warning:     $amber.darken-2
  error:       $red.accent-4
  success:     $green.lighten-2
}

// Import Vuetify styling
@require '~vuetify/src/stylus/main'

.page
  @extend .fade-transition

Le problème est que la modification de ces couleurs de thème n'entraîne aucune modification.

Des idées pour résoudre ceci?

Answer 1

La solution est simple.

Deux fichiers régissent ceci - nuxt.config.js et node_modules/vuetify/es5/colors.js.

Vous devez ouvrir nuxt.config.js et accéder à la propriété vuetify. La propriété themes sous la section vuetify: {...} Vous permet de mapper les noms de classe aux variables de couleur configurées.

De plus, pour modifier les valeurs des variables de couleur, modifiez le fichier node_modules/vuetify/es5/colors.js. Ici, vous définissez toutes les couleurs dont vous avez besoin selon le code de couleur hexadécimal que vous souhaitez.