Vuetify条件黑暗主题

Question

我正在使用Vuetify创建我的社交媒体网站。我现在面临的问题是我想使用暗属性，因此用户可以在正常和黑暗主题之间切换。问题是我不能使用任何Vue的条件渲染方法，因为dark不是你可以绑定的属性。以下是您用于应用黑暗主题的代码部分：

<v-app dark>

Answer 1

是dark或light不是普通属性，它们是props，可以接受值，在这种情况下为true或false

您可以在vuetify的文档中找到它。

道具是用于与子组件进行通信的属性。并以:为前缀，以区别于常规属性。

解决方案。

<v-app :dark="true"> 

或

<v-app :dark="false"> 

您可以用任何反应性数据选项或计算出的属性替换try或false，以编程方式更改主题。

Answer 2

如果将组件用作应用程序：

<template>
   <v-app :dark="isDark"></v-app>
</template>

<script>
   export default {
      data () {
         return {
            isDark: false,
         }
      },
   }
</script>

也可以从应用实例中调用

通过其实例化对象定义的属性 app.__vue__.isDark = isDark 当被实例化时：

const app = new Vue(
    {
        data: () => ({
            isDark: false
        }),
    }
)

因此可以从其他组件中调用

Answer 3

能够与localstorage保持主题

在plugins/vuetify.js或plugins/vuetify.ts内添加以下内容：

export default new Vuetify({
  theme: {
    //
    dark: localStorage.getItem('theme') === 'dark',
    //
  }
})

然后在要切换主题的按钮上应用以下功能：

switchTheme() {
  this.$vuetify.theme.dark = !this.$vuetify.theme.dark;

  localStorage.setItem('theme', this.$vuetify.theme.dark ? 'dark' : 'light');
}

Answer 4

正如documentation所说，您可以只更新变量this.$vuetify.theme.dark：

  

您可以通过将this。$ vuetify.theme.dark更改为true或false来手动打开和关闭黑暗。