Nuxt + Vuetify。如何应用主题颜色

我正在使用Nuxt.js + Vuetify.js项目

看文件assets/style/app.styl我们有

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

问题是,更改这些主题颜色不会导致任何更改。

任何想法如何解决这个问题?

神无凯2020/03/23 14:45:50

解决方案很简单。

Two files govern this - nuxt.config.js and node_modules/vuetify/es5/colors.js.

You need to open nuxt.config.js, and head over to the vuetify property. The themes property under the vuetify: {...} section lets you map the class names to configured color variables.

Further, to change the values of the colour variables, modify the file node_modules/vuetify/es5/colors.js. Here, you define any colors you need to whatever hex color code you want.