我正在使用 nuxt.js vuetify 模板,nuxt.config.js 已经有一个对象(如下所述),它定义了应用程序的暗模式。
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
如何将其添加为一项功能,作为从浅色版本切换到深色版本的按钮? Vuetify 有 documentation用于主题自定义,但没有正确的方法可以解释如何在应用程序中执行此操作。
最佳答案
您可以在 v-btn
上执行以下操作来操作 $vuetify.theme.dark
。
<v-btn @click="$vuetify.theme.dark=!$vuetify.theme.dark">Toggle Theme</v-btn>
这将在浅色和深色主题之间切换。 该设置在文档中的标题“Light and Dark”中进行了描述,尽管我承认很容易错过。
编辑:在本地存储中保存状态
创建一个方法并调用它@click。
toggleTheme() {
this.$vuetify.theme.dark=!this.$vuetify.theme.dark;
localStorage.setItem("useDarkTheme", this.$vuetify.theme.dark.toString())
}
在挂载后,您可以加载该状态
mounted() {
const theme = localStorage.getItem("useDarkTheme");
if (theme) {
if (theme == "true") {
this.$vuetify.theme.dark = true;
} else this.$vuetify.theme.dark = false;
}
}
关于javascript - 在 nuxt.js 上为 vuetify app v2.0 添加暗模式切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59533016/