如何在Nuxt.js的Vuetify v2.0应用中添加暗色模式切换按钮？

我来帮你搞定这个明暗主题切换的功能，其实Vuetify本身已经内置了对应的属性，结合Nuxt的生命周期就能轻松实现，步骤很清晰：

1. 确认基础配置（你已经搞定了） #

你当前nuxt.config.js里的Vuetify配置已经默认开启了暗色模式，这个基础没问题：

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

2. 添加切换按钮并实现切换逻辑 #

推荐把切换按钮放在全局布局组件（比如layouts/default.vue）里，这样全站都能访问到。核心就是通过点击事件切换$vuetify.theme.dark的布尔值，顺便把用户的选择存在本地存储里，避免刷新后重置：

<template>
  <v-app>
    <!-- 你的其他布局内容 -->
    <v-btn 
      @click="toggleTheme" 
      icon 
      class="position-fixed top-0 right-0 mr-4 mt-4"
    >
      <v-icon>{{ $vuetify.theme.dark ? 'mdi-lightbulb-on' : 'mdi-lightbulb-off' }}</v-icon>
    </v-btn>
    <nuxt />
  </v-app>
</template>

<script>
export default {
  methods: {
    toggleTheme() {
      // 切换主题状态
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
      // 把选择存入localStorage，持久化用户偏好
      localStorage.setItem('darkTheme', this.$vuetify.theme.dark);
    }
  },
  mounted() {
    // 页面加载时读取本地存储的设置，没有的话用默认的暗色模式
    const savedTheme = localStorage.getItem('darkTheme');
    if (savedTheme !== null) {
      this.$vuetify.theme.dark = savedTheme === 'true';
    }
  }
}
</script>

3. 可选：自定义亮色主题配色 #

如果你想让亮色模式也有专属的配色，只需要在nuxt.config.js的themes对象里添加light配置即可：

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  theme: {
    dark: true,
    themes: {
      dark: { /* 你的暗色主题配置 */ },
      light: {
        primary: colors.blue.lighten2,
        accent: colors.grey.lighten3,
        secondary: colors.amber.lighten3,
        info: colors.teal.darken1,
        warning: colors.amber.darken1,
        error: colors.deepOrange.lighten4,
        success: colors.green.lighten3
      }
    }
  }
},

这样切换主题时，Vuetify会自动应用对应的配色方案，体验更完整。

内容的提问来源于stack exchange，提问作者Fayaz