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

Question

我正在使用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

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

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

Answer 1

文档没有告诉如何正确更改颜色...

首先，您需要设置当前主题，然后对其进行配置。我已经浪费了 4 个小时来解决这个问题。您需要相应地更改配置：

vuetify: {
        theme: {
            light: true,  //you don't actually need this line as it's for default
            themes: {
                light: {
                    primary: '#b71c1c',
                    ...
                }
            }
        }
    },

在解决这个问题时，我发现您也可以像这样自由添加颜色：

vuetify: {
        theme: {
            themes: {
                light: {
                    'custom-color-one': '#b71c1c',
                    'custom-color-two': '#3B8070',
                    ...
                }
            }
        }
    },

然后在你的 HTML 中：

<div class='custom-color-one'>
  I'am div with custom background color!
</div>

<div class='custom-color-one--text'>
  I'am div with custom text color!
</div>

Answer 2

不确定，但也许可以尝试一下，这取决于 vuetify 的包含方式，但我认为如果您使用 vuetify nuxt 模板，那么您需要将其包含在您的nuxt.config.js文件中。
如果你像这样包含 vuetify ：

modules: [
 '@nuxtjs/vuetify'

然后添加主题，如下所示：

module.exports = {
  modules: [
    '@nuxtjs/vuetify'
    // ...
  ]
  // Add the following:  
  vuetify: {
    theme: {
      secondary: '#ff0000'
      // ...
    }
  },