无法在vuetify项目中添加自定义颜色

Question

我正在使用vuetify，并且遵循https://vuetifyjs.com/en/customization/theme/#custom-theme-variants添加自定义主题颜色。我试图在theme.js文件中做到这一点

// src/plugins/vuetify/theme.js

import colors from 'vuetify/lib/util/colors'

export default {
    // All keys will generate theme styles,
    // Here we add a custom `name` color
    name: colors.pink,
}

但是当我将其包含在项目中时，它将无法正常工作。

    <v-app-bar app color="name" dark dense elevation="1">

这可能是什么问题？有人可以帮忙吗？ 这是我的项目结构

Answer 1

尝试类似的事情：

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        custom: '#05a334',
      },
    },
  },
});

// src/main.js
import Vue from 'vue'
import App from './app.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

<template>
  <v-app>
    <div>
      <v-btn color="custom">Test</v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'app',
};
</script>