Vuetify 在明暗主题之间切换(使用 vuex) [英] Vuetify toggle between light and dark theme (with vuex)
本文介绍了Vuetify 在明暗主题之间切换(使用 vuex)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以在我的 Vue 项目中，我基本上有两个页面/组件，它们将根据 url 使用 vue-router 显示.我可以通过一个按钮在这些页面/组件之间切换.
我也在使用 vuex 来管理一些数据.
现在我在其中一个组件中加入了一个开关，用于在 vuetify 的深色和浅色主题之间切换.在这个组件的模板中，我做了:
在被调用的函数中，我这样做:
toggleDarkTheme() {this.$vuetify.theme.dark = !this.$vuetify.theme.dark;console.log(this.$vuetify.theme.dark);},在 app.vue 中我包含了 <v-app dark> 并且在我的 main.js 中我有以下内容:
Vue.use(Vuetify);const vuetify = 新 vuetify({主题: {//暗:真，主题:{光: {主要:colors.purple，次要:colors.grey.darken1，口音:colors.shades.black，错误:colors.red.accent3，背景:colors.indigo.lighten5，},黑暗的: {主要:colors.blue.lighten3，背景:colors.indigo.base，},},},});Vue.config.productionTip = false;新的 Vue({路由器，店铺，验证，渲染:(h) =>h(应用程序),}).$mount('#app');所以我现在的问题是，当我单击开关时，该组件中的主题确实从亮模式切换到暗模式.浅色模式是默认模式，当我点击开关一次时，我会得到深色主题.但是，当我单击按钮切换到另一个 url 时，将使用浅色主题.如何正确实现此功能?
提前致谢！
解决方案
你应该有一个名为 vuetify.js 的 JavaScript 类，在你的情况下应该是这样的.
从vue"导入Vue；从vuetify/lib"导入 Vuetify；Vue.use(Vuetify);导出默认的新 Vuetify({主题: {主题:{光: {主要:colors.purple，次要:colors.grey.darken1，口音:colors.shades.black，错误:colors.red.accent3，背景:colors.indigo.lighten5},黑暗的: {主要:colors.blue.lighten3，背景:colors.indigo.base}}}});你的开关应该可以工作，但为了以防万一，试试我在你的组件中制作的这个按钮.
<v-tooltip v-if="!$vuetify.theme.dark" 底部><template v-slot:activator="{ on }"><v-btn v-on="on" color="info" small fab @click="darkMode"><v-icon class="mr-1">mdi-moon-waxing-crescent</v-icon></v-btn><span>暗模式开启</span></v-工具提示><v-tooltip v-else 底部><template v-slot:activator="{ on }"><v-btn v-on="on" color="info" small fab @click="darkMode"><v-icon color="yellow">mdi-white-balance-sunny</v-icon></v-btn><span>暗模式关闭</span></v-工具提示>按钮在您的
