vuetify：如何设置窗口背景颜色？
Posted
技术标签:
【中文标题】vuetify：如何设置窗口背景颜色？【英文标题】：vuetify: how to set the window background color? 【发布时间】：2021-10-02 14:24:01 【问题描述】：我有一个小型 vuetify 2.x 应用，它显示一个带有深色主题的列表。
当我滚动到列表末尾（顶部或底部）之外时，我看到一个白色区域出现了一秒钟。
是否可以将窗口背景颜色设置为黑色，或者与深色主题背景颜色相同，这样当我滚动到页面末尾时就不会出现这个白色区域？
我测试了vuetify how to set background color问题的答案，但没有成功。
解决方案：在public/index.html 文件中设置<body style="background-color:black;"> 解决了这个问题。现在只需要找到与 vuetify 深色背景匹配的颜色即可。
【问题讨论】：
【参考方案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
【讨论】：
以上是关于vuetify：如何设置窗口背景颜色？的主要内容，如果未能解决你的问题，请参考以下文章