Vuetify 明暗主题切换

const opts = {
  theme: {
    dark: false,
    themes: {
      light: {
        primary: '#409eff',
        secondary: '#54a8ff',
        accent: '#9c27b0',
        error: '#f44336',
        warning: '#ff5722',
        info: '#607d8b',
        success: '#4caf50'
      },
      dark: {
        primary: colors.blue.darken1
      }
    }
  }
}
复制代码

<v-btn icon @click="changeTheme">
  <v-icon v-if="!dark">mdi-brightness-7</v-icon>
  <v-icon v-else>mdi-brightness-4</v-icon>
</v-btn>

export default {
  data: () => ({
    dark: false
  }),
  methods: {
    changeTheme () {
      this.dark = !this.dark
      this.$vuetify.theme.dark = this.dark
    }  
  }
}