[Feature Request] Add customization to v-dialog overlay 2.0

[martinszeltins]

Problem to solve

Right now the v-dialog component has a fixed and unchangable overlay color that is set to "opacity: 0.46; background-color: rgb(33, 33, 33);". That is the v-overlay__scrim element. The problem is that users cannot change the opacity of the background overlay for the dialogs.

The only way right now to change the opacity of the overlay is to manually override the class. But it still doesn't work if there are multiple dialogs on a single page.

Proposed solution

The solution is to simply add a background (or overlay) property to the v-dialog component. This allows a user to change both the opacity and the color of dialog's overlay:

<v-dialog
   background="rgba(33, 33, 33, 0.50)"
   v-model="dialog"
>

[Thys-Smit]

+1 for this.

My workaround :

<v-overlay :opacity="0.8">
        <v-dialog 
            v-model="dialog" 
            persistent 
            hide-overlay
        >
        </v-dialog>
</v-overlay>

Depending on your implementation of the dialog, you might need to use the v-model="dialog" on v-overlay aswel.

[ghost]

Old issue but still relevant. Here is my workaround if anyone runs across this.

There's no way to override the .v-overlay__scrim class styling. So what I do is:

Set opacity to 0, give it an ID <v-overlay id="myoverlay" absolute opacity="0" />

Then customize the styling

#myoverlay {
  background-color: rgba(150, 0, 0, 0.95);
}

This makes the .v-overlay__scrim class invisible, and gives you full control over the actual overlay. You can add background images, custom colors, whatever.

---

If you're trying to customize the navigation drawer overlay.. then set the hide-overlay prop on the nav drawer and add your own custom v-overlay that shares the nav-drawer's v-model

for example...

<v-overlay v-if="drawer" id="myoverlay" absolute opacity="0" />
<v-navigation-drawer v-model="drawer" hide-overlay ... />