vuetify：如何设置窗口背景颜色？

【问题标题】：vuetify: how to set the window background color?vuetify：如何设置窗口背景颜色？
【发布时间】：2021-10-02 14:24:01
【问题描述】：

我有一个小型 vuetify 2.x 应用，它显示一个带有深色主题的列表。

当我滚动到列表末尾（顶部或底部）之外时，我看到一个白色区域出现了一秒钟。

是否可以将窗口背景颜色设置为黑色，或者与深色主题背景颜色相同，这样当我滚动到页面末尾时就不会出现这个白色区域？

我测试了vuetify how to set background color问题的答案，但没有成功。

解决方案：在public/index.html 文件中设置<body style="background-color:black;"> 解决了这个问题。现在只需要找到与 vuetify 深色背景匹配的颜色即可。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

Vuetify 根据深色模式更改v-app 的背景颜色。

您可以在 Vuetify 的暗模式 ($vuetify.theme.isDark) 上使用观察器，将 body 的背景颜色设置为与 v-app 的背景颜色匹配：

将template ref 添加到v-app 组件（命名为“app”）：
```
<v-app ref="app">
        ?
```

在 Vuetify 的 $vuetify.theme.isDark 属性上添加一个 watcher，将 v-app 的背景颜色复制到正文。 v-app的背景色在下一个渲染周期生效，所以在$nextTick()中查询：

export default {
  watch: {
    '$vuetify.theme.isDark'() {
      this.$nextTick(() => {
        const rootStyles = window.getComputedStyle(this.$refs.app.$el)
        document.body.style.backgroundColor = rootStyles.backgroundColor
      })
    }
  }
}

GitHub demo

【讨论】：