How to Make Appbar Background Color Transparent in Vuetify

Question

I cannot figure out how to make the app-bar in vuetify transparent. I tried adding the property color="transparent", but that did not work. I tried color="rgba(0,0,0, 0)", but that did not work. I tried color="shades.transparent" - and that also did not work.

I can't figure it out. Any idea how to make this happen?

Thanks.

Answer 1

Well if you want to have the app bar transparent only when it is on top or in certain distance of top you can use window.onscroll to change the background color.

<v-app-bar :color="bg">...</v-app-bar>

then in your script section

mounted() {
    window.onscroll = () => {
      this.changeColor();
    };
  },
  methods: {
    changeColor() {
      if (
        document.body.scrollTop > 100 ||
        document.documentElement.scrollTop > 100
      ) {
        this.bg = 'white';
      } else {
        this.bg = 'transparent';
      }
    },
  },

Answer 2

When you have a fixed appbar the vuetify applies a equal padding to the v-content, Inorder to remove this padding and pull the content up, you can use class="pa-0". Then the v-content will start from top of screen and makes the transparent appbar visible. I hope that makes sense.

Codepen: https://codepen.io/aaha/pen/qBbVNWG

<v-app app>
    <v-app-bar app color="transparent">
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-app-bar>
    <v-content class="ma-0 pa-0">
       <div class="d-flex flex-wrap justify-center" width="900">
        <img src="https://picsum.photos/300/300"/>
        <img src="https://picsum.photos/600/300"/>
        <img src="https://picsum.photos/700/300"/>
        <img src="https://picsum.photos/200/300"/>
        <img src="https://picsum.photos/400/300"/>
        <img src="https://picsum.photos/500/300"/>
      </div>
    </v-content>
  </v-app>