Vuetify: [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.