How to Make Appbar Background Color Transparent in Vuetify

user_7477670 0
Viewed 7596

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.

vuetify.js
3 Answers

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';
      }
    },
  },
user_102470790

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>
user_24634030

Don't know if you're still having trouble with this, but I figured I'd at least post my solution for anyone else who may be having this issue.

I'm using Vuetify with Nuxtjs, and I was able to find the element that applies the background color in my Chrome Dev Tools.

.theme--light.v-app-bar.v-toolbar.v-sheet{
   background-color: #f5f5f5;
}

I copy-and-pasted it into the styles of my default.vue file and changed it to:


.theme--light.v-app-bar.v-toolbar.v-sheet {
    background: transparent;
}

And that seems to have done the trick for me.

user_91115120
Related