pugvuetifyjs3

Vuetify v-menu color

I am trying to change the color of the dropdown background of a v-menu. Right now it is just white then in dark mode it is that dark gray.

I have tried the css override using this:

.v-menu__content { background-color: var(--v-success-base) !important; }

But this is not working no matter what I try. I am also using the: content-class in the v-menu but this doesn’t work either.

Is this even possible and should I just use a different solution than a app bar button opening this v-menu?

Solution

  • You can style the underlying v-list in a v-menu by using :content-props and the CSS Variable --v-theme-surface which is used internally by v-list's SaaS variables.

    First define a CSS rule to change the background color variable:

    .success-content {
  --v-theme-surface: 25, 135, 84;
}

    Be careful ❗️ Color CSS variables will most of the time only take numbers and not colors directly ; while the previous CSS rule works, the following will not:

    .success-content { /* Will not work! */
  --v-theme-surface: rgb(25, 135, 84);
}

    After creating your CSS rule, you can then apply it to your v-menu :

    <v-menu
  ...
  :menu-props="{
    contentClass: 'success-content',
  }"
>

    Here is a demo on VPlay.

    You can also use custom theming to generalise those styles and reuse them in other places in your code, and also use attached or detached styles. For more details, you can check this answer to a similar styling question using Vuetify

    Wish you good luck with your project !