Here is my sample code I have added a v-dialog ftom vuetify. I want the background to be dark/black or blur when the v-dialog opens
<v-dialog v-model="logoutdialog" width="500" >
<v-card>
<v-card-title>
<span>Logout</span>
<v-spacer></v-spacer>
<v-menu bottom left>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
@click="logoutdialog= false">
<v-icon>mdi-close</v-icon>
</v-btn>
</template>
</v-menu>
</v-card-title>
<v-card-actions>
<v-btn
color="primary" text @click="logoutdialog = false">
Close
</v-btn>
</v-card-actions>
</v-card>
[![expected output][1]][1]
</v-dialog>
The below attached is the sample code [1]: https://i.stack.imgur.com/oXD3f.jpg
Here's something that works for me in vue2
<style>
/* hide the "scrim", it's pointless */
.v-overlay--active .v-overlay__scrim {
display: none;
}
/* style the overlay container as required */
.v-overlay--active {
backdrop-filter: blur(2px);
background: rgb(0 0 0 / 0.8);
}
/* if you have an auto dark theme
for prefers-color-scheme: dark
I find the 0.8 too dark
*/
@media (prefers-color-scheme: dark) {
.v-overlay--active {
background: rgb(0 0 0 / 0.4);
}
}
</style>
You can do this by defining overlay-color and overlay-opacity props for v-dialog component.
API documentation: https://vuetifyjs.com/en/api/v-dialog/#props-overlay-color
Example: https://codesandbox.io/s/vuetify-playground-forked-t9zhps?file=/src/layout.vue:0-1695
<v-dialog
v-model="logoutdialog"
width="500"
overlay-color="black"
overlay-opacity="1"
>
// rest of the code
</v-dialog>