Vuetify: перезаписать цвета темы

#vue.js #vuetify.js

#vue.js #vuetify.js

Вопрос:

Я пытаюсь перезаписать некоторые классы.

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>
 

Результат

Это явно не работает, потому что, похоже, использует цвета по умолчанию.

введите описание изображения здесь

Ответ №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 ]