javascript - 在 nuxt.js 上为 vuetify app v2.0 添加暗模式切换

标签 javascript vue.js vuetify.js nuxt.js

我正在使用 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用于主题自定义,但没有正确的方法可以解释如何在应用程序中执行此操作。

最佳答案

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

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

这将在浅色和深色主题之间切换。 该设置在文档中的标题“Light and Dark”中进行了描述,尽管我承认很容易错过。

编辑:在本地存储中保存状态

创建一个方法并调用它@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;
    }
}

关于javascript - 在 nuxt.js 上为 vuetify app v2.0 添加暗模式切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59533016/

相关文章:

javascript - 使用 Plaid Link 显示自定义用户名和密码模式对话框

javascript - 单击按钮时添加 HTML 表单

javascript - 将 <link rel ="stylesheet"> 原始内容加载到 &lt;style&gt; 标签中

vue.js - 防止 Vue 中的 v-model 更改

css - 应用 .scss-styles 来验证自定义标签

javascript - 使用 vuetify.js 创建表和子表——不知道从哪里开始

vue.js - v-card 中的 Vuetify 抽屉导航

javascript - Google Maps V3,javascript折线捕捉到 map 上有大量点的道路

javascript - Vuex:观察状态中的逻辑

javascript - 防止点击 VuetifyJS 组合框后调用软键盘