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

我正在使用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提供了主题定制功能，但没有合适的方法来解释如何在应用程序中实现这一功能

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

  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
        }
      }
    }
  },

在挂载状态下，您可以加载该状态

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

---

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

在挂载状态下，您可以加载该状态

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

---

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

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

---

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

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

---

我发现了一种为暗/光模式添加开关按钮的好方法和最快方法：

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

---

不需要其他任何东西。

我找到了一种为暗/光模式添加开关按钮的好方法和最快方法：

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

---

没有其他需要。

如何在localStorage中存储暗模式状态，并在应用程序启动时获取它？@FarshidRezaei查看我的编辑。我就是这样做的。它放在哪里？哪个文件或组件？无论您希望在哪里对主题进行初始检查。如果您有一个登录页面，并且您希望该页面已经变暗，那么应该是该登录页面如何在localStorage中存储暗模式状态，并在app start上获取它？@FarshidRezaei查看我的编辑。我就是这样做的。它放在哪里？哪个文件或组件？无论您希望在哪里对主题进行初始检查。如果您有一个登录页面，并且您希望该页面已经变暗，那么它将是该登录页面