思路
通过修改 Vuetify 中的 theme.dark
属性实现, 官方介绍 vuetifyjs.com/en/customiz…
实现
项目 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 } } }