vuetify: how to set the window background color?

Question

I have a small vuetify 2.x app that displays a list with the dark theme.

When I scroll beyond the end of the list (top or bottom) I see a white zone appearing for a second.

Is it possible to set the window background color to black, or the same as the dark theme background color, so that I don't have this white zone showing up when I scroll beyond the end of the page ?

I tested without success the answer to the question vuetify how to set background color.

Solution: setting <body style="background-color:black;"> in the public/index.html fie fixed the problem. Now it's just a matter of finding the color matching the dark background of vuetify.

tony19 · Accepted Answer · 2022-07-16T02:07:27.027

Vuetify changes the background color of v-app based on dark mode.

You could use a watcher on Vuetify's dark mode ($vuetify.theme.isDark) that sets the body's background color to match that of the v-app:

Add a template ref to the v-app component (named "app"):
```
<v-app ref="app">
        
```

Add a watcher on Vuetify's $vuetify.theme.isDark property that copies the v-app's background color to the body. The v-app's background color takes effect in the next render cycle, so query it in $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: how to set the window background color?

1 Answers1