vue.js - vuetify 将主题更改为自定义主题

Question

我已经使用 Vuetify 几个星期了。在阅读了这方面的文档和一些帖子后，我尝试更改“深色”主题以满足我的需要。

出于某种原因，我当然只能通过 CSS 专门设置组件的颜色来更改组件的颜色。

我的 vuetify.js 文件(在插件下)看起来像这样:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
      },
      dark: {
        primary: colors.blueGrey.darken2,
        secondary: colors.blueGrey.lighten2,
        accent: colors.blueGrey.darken3,
      },
    },
  },
});

我的 App.vue 文件看起来像这样:

  <div>
    <v-app dark>
      <v-tabs background-color="#2c394f" color="white">
        <v-tab to="/deploy">Deploy</v-tab>
        <v-tab to="/dashboard">Dashboard</v-tab>
      </v-tabs>
      <keep-alive>
        <router-view/>
      </keep-alive>
    </v-app>
  </div>
</template>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style scoped>

</style>

您可能会注意到，我正在使用深色主题(在 v-app 组件中)，并且由于未应用我的主题定义，因此我手动设置了(例如)v-tabs 组件。理想情况下，我只想使用 color="primary"或类似的东西设置 v-tabs 的颜色，但如果我删除属性，我将获得默认主题，在这种情况下为“light”。

任何帮助将不胜感激。

Answer 1

您只需设置 theme.dark:true 即可为整个应用启用深色。然后将应用自定义深色..

export default new Vuetify({
  theme: {
    dark: true,
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black, 
        error: colors.red.accent3,
      },
      dark: {
        primary: colors.blueGrey.darken2,
        secondary: colors.blueGrey.lighten2,
        accent: colors.blueGrey.darken3,
      },
    },
  },
})

Demo