Question

我正在使用nuxt.js vuetify模板，nuxt.config.js已经具有一个对象（如下所述），该对象为应用定义了暗模式。

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

如何将其添加为功能，作为从浅色版本切换为深色版本的按钮？ Vuetify具有documentation用于主题自定义，但是没有适当的方法来说明如何在应用程序中执行此操作。

Answer 1

您可以在v-btn上执行以下操作来操纵$vuetify.theme.dark。

<v-btn @click="$vuetify.theme.dark=!$vuetify.theme.dark">Toggle Theme</v-btn>

这将在亮和暗主题之间切换。该设置在文档的标题“ Light and Dark”中进行了说明，尽管我承认很容易错过。

编辑：将状态保存在localStorage中

创建一个方法并将其命名为@click。

toggleTheme() {
   this.$vuetify.theme.dark=!$this.vuetify.theme.dark;
   localStorage.setItem("useDarkTheme", this.$vuetify.theme.dark.toString())
}

在安装后，您可以加载该状态

mounted() {
  const theme = localStorage.getItem("useDarkTheme");
    if (theme) {
      if (theme == "true") {
        this.$vuetify.theme.dark = true;
      } else this.$vuetify.theme.dark = false;
    }
}

Answer 2

我只是自我修复。转到nuxt.config并添加此代码。

buildModules: [
    [
      "@nuxtjs/vuetify",
      {
        treeShake: true,
        theme: {
          dark: true,
        }
      }
    ]
  ],

Answer 3

我发现为暗/亮模式添加一个切换按钮的好又快的方法：

<v-btn
  icon
  :color="$vuetify.theme.dark ? 'yellow' : 'dark'"
  @click="$vuetify.theme.dark = !$vuetify.theme.dark"
>

没有其他需要了。

在nuxt.js上添加暗模式切换以vuetify应用v2.0

3 个答案: