CODEWITHSUNDEEP
vue.jsvuetify.js
chmike
chmike

Reputation: 22134

vuetify: how to set the window background color?

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.

Upvotes: 1

Views: 1351

Answers (1)

tony19
tony19

Reputation: 138196

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:

  1. Add a template ref to the v-app component (named "app"):

    <v-app ref="app">
        👆

  2. 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

screencast

Upvotes: 1

Related Questions