所以在我的 Vue 项目中，我基本上有两个页面/组件，它们将根据 URL 使用 vue-router 显示。我可以通过按钮在这些页面/组件之间切换。
我也在使用 VueX 来管理一些数据。
现在我在其中一个组件中添加了一个开关，用于在 Vuetify 的深色和浅色主题之间切换。
在我做的这个组件的模板中：
<v-switch
label="Toggle dark them"
@change="toggleDarkTheme()"
></v-switch>
在我调用的函数中：
toggleDarkTheme() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
console.log(this.$vuetify.theme.dark);
},
在 app.vue 中，我包含了
<v-app dark> Vue.use(Vuetify);
const vuetify = new Vuetify({
theme: {
// dark: true,
themes: {
light: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3,
background: colors.indigo.lighten5,
},
dark: {
primary: colors.blue.lighten3,
background: colors.indigo.base,
},
},
},
});
Vue.config.productionTip = false;
new Vue({
router,
store,
vuetify,
render: (h) => h(App),
}).$mount('#app');
所以我现在的问题是，当我点击开关时，主题确实在这个组件中从亮模式切换到暗模式。浅色模式是默认模式，当我单击一次开关时，我会得到深色主题。但是，当我单击按钮切换到另一个 URL 时，将使用浅色主题。 如何正确实现此功能？
提前致谢！
你应该有一个名为
vuetify.jsimport Vue from "vue";
import Vuetify from "vuetify/lib";
Vue.use(Vuetify);
export default new Vuetify({
theme: {
themes: {
light: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3,
background: colors.indigo.lighten5
},
dark: {
primary: colors.blue.lighten3,
background: colors.indigo.base
}
}
}
});
你的开关应该工作，但为了以防万一，试试我在你的组件中制作的这个按钮。
<div>
<v-tooltip v-if="!$vuetify.theme.dark" bottom>
<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>
</template>
<span>Dark Mode On</span>
</v-tooltip>
<v-tooltip v-else bottom>
<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>
</template>
<span>Dark Mode Off</span>
</v-tooltip>
</div>
按钮在您的
<script>darkMode() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
}
下面的代码创建了一个黑暗模式切换开关 btn.
注意：它的用途
LocalstoreDarkModeToggel.vue
<template>
<v-icon class="mr-2">
mdi-brightness-4
</v-icon>
<v-list-item-title class="pr-10">
Dark Mode
</v-list-item-title>
<v-switch v-model="darkmode" color="primary" />
</template>
--
<script>
export default {
data () {
return {
darkmode: false
}
},
watch: {
darkmode (oldval, newval) {
this.handledarkmode()
}
},
created () {
if (process.browser) {
if (localStorage.getItem('DarkMode')) {
const cookieValue = localStorage.getItem('DarkMode') === 'true'
this.darkmode = cookieValue
} else {
this.handledarkmode()
}
}
},
methods: {
handledarkmode () {
if (process.browser) {
if (this.darkmode === true) {
this.$vuetify.theme.dark = true
localStorage.setItem('DarkMode', true)
} else if (this.darkmode === false) {
this.$vuetify.theme.dark = false
localStorage.setItem('DarkMode', false)
}
}
}
}
}
</script>
@ckuessner 的回答有效但不持久。
这里是按钮主题切换器的简单示例，主题状态持久化在 cookie 中。基于 @rohit-nishad.
的解决方案几种cookie操作方式：
给出的示例是使用 cookie-universal-nuxt 实现的。
ColorThemeSwitch.vue
<template>
<v-tooltip bottom>
<template #activator="{ on }">
<v-btn v-on="on" icon @click="switchTheme">
<v-icon>
{{ $vuetify.theme.dark ? 'mdi-white-balance-sunny' : 'mdi-moon-waxing-crescent' }}
</v-icon>
</v-btn>
</template>
<span>Change theme</span>
</v-tooltip>
</template>
<script>
export default {
created() {
const darkModeCookie = this.$cookies.get('app.darkMode');
if (darkModeCookie) {
this.$vuetify.theme.dark = darkModeCookie;
}
},
methods: {
switchTheme() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
this.$cookies.set('app.darkMode', this.$vuetify.theme.dark);
},
},
};
</script>
最好将“已创建”钩子中的代码放在布局或插件中的某个位置，这样无论组件是否显示在当前页面上，您的应用程序都会更改主题。插件使用示例：
~/plugins/persistedThemeLoader.js
export default function ({ $vuetify, $cookies }) {
const darkModeCookie = $cookies.get('app.darkMode');
if (darkModeCookie) {
$vuetify.theme.dark = darkModeCookie;
}
}
nuxt.config.js
plugins: [
'~/plugins/vuetify',
{ src: '~/plugins/persistedThemeLoader', mode: 'client' },
],