Vuetify 条件黑暗主题

Question

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

<v-app dark>

Answer 1

是 dark 或 light 不是属性，它们是 props 可以取值，在这种情况下 true 或 false

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

Props 是用于与子组件通信的属性。并以:为前缀，以区别于普通属性。

来到解决方案。

<v-app :dark="true">

或

<v-app :dark="false">

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

Answer 2

如果一个组件被用作App:

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

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

也可以从app实例调用

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

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

所以可以从其他组件调用

Answer 3

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

You can manually turn dark on and off by changing this.$vuetify.theme.dark to true or false.

Answer 4

能够与 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');
}

Vuetify 条件黑暗主题

Vuetify conditional dark theme

vuejs2

vuetify.js