Vuetify：覆盖主题颜色

Question

我正在尝试覆盖一些类。

src/plugins/vuetify.js

import Vue from "vue"
import Vuetify from "vuetify/lib/framework"

Vue.use(Vuetify)

export default new Vuetify({
    theme: {
        primary: "#4BB7E8",
        info: "#769BD0",
        success: "#9B83BC",
        warning: "#82C341",
        error: "#53BD6D",
        default: "#30B795"
    }
})

尝试过

<v-navigation-drawer v-model="drawer" app class="blue lighten-5">
    <p class="success">menu goes here</p>
    <p class="info">menu goes here</p>
    <p class="primary">menu goes here</p>
    <p class="danger">menu goes here</p>
    <p class="warning">menu goes here</p>
    <p class="default">menu goes here</p>
</v-navigation-drawer>

结果

显然它不起作用，因为它似乎使用默认颜色。

Answer 1

正确的做法是：

export default new Vuetify({
    theme: {
      themes: {
        light: {
          primary: "#4BB7E8",
          info: "#769BD0",
          success: "#9B83BC",
          warning: "#82C341",
          error: "#53BD6D",
          default: "#30B795"
        }
      }
    }
})

[https://vuetifyjs.com/en/styles/colors/#javascript-color-pack]