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

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

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

原文由 isebarn 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Виктор Кондик 发布，翻译遵循 CC BY-SA 4.0 许可协议