Vuetify 明暗主题切换

思路

通过修改 Vuetify 中的 theme.dark 属性实现, 官方介绍 https://vuetifyjs.com/en/customization/theme/

实现

项目 vuetify 设置如下(vuetify.js), 默认 dark 属性值为 false (默认浅色明亮主题)

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

在按钮点击事件中进行主题切换, template 中按钮点击主题切换, 按钮 icon 也切换

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

script

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

项目地址

https://github.com/gywgithub/vue-d3-examples