vuetify 将主题更改为自定义主题答案

【问题标题】：vuetify change theme to a custom onevuetify 将主题更改为自定义主题
【发布时间】：2020-04-14 12:19:53
【问题描述】：

我已经使用 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”。

任何帮助将不胜感激。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案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

【讨论】：

这太简单了。谢谢

【解决方案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>

【讨论】：