CODEWITHSUNDEEP
vuetify.js
Moshe
Moshe

Reputation: 7007

How to Make Appbar Background Color Transparent in Vuetify

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.

Upvotes: 4

Views: 13392

Answers (3)

Holger Mueller
Holger Mueller

Reputation: 432

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.

Upvotes: 0

drocha87
drocha87

Reputation: 629

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

Upvotes: 10

Anees Hameed
Anees Hameed

Reputation: 6564

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>

Upvotes: 1

Related Questions