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-tab的颜色，但是如果删除属性，我将获得默认主题，在这种情况下，主题为'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

Answer 2

为了扩展 Zim answer，如果您想使用 this.$vuetify.theme.dark //bolean 向用户提供该选项，还可以通过编程方式设置它。

这个例子可以在文档https://vuetifyjs.com/en/features/theme/#theme-provider

中看到

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['One', 'Two', 'Three']
  }),
})

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-card flat>
            <v-toolbar flat height="72">
              <v-switch v-model="$vuetify.theme.dark" hint="This toggles the global state of the Vuetify theme" inset label="Vuetify Theme Dark" persistent-hint></v-switch>
            </v-toolbar>

            <v-card-text>
              <v-list dark>
                <v-subheader>I inherit dark from my parent</v-subheader>

                <v-list-item v-for="item in items" :key="item">
                  <v-list-item-title v-text="item"></v-list-item-title>
                </v-list-item>
              </v-list>

              <v-divider class="mb-y"></v-divider>
              <v-theme-provider root>
        <v-list>
          <v-subheader>
            <span>I inherit from the root</span>

            <strong>&nbsp;$vuetify.theme.dark</strong>
          </v-subheader>

          <v-list-item
            v-for="item in items"
            :key="item"
          >
            <v-list-item-title v-text="item"></v-list-item-title>
          </v-list-item>
        </v-list>
      </v-theme-provider>
            </v-card-text>
          </v-card>
        </v-container>
      </v-main>
      <v-footer>Footer without app</v-footer>
    </v-app>
  </div>

将更改主题变为自定义主题

2 个答案: