Vuetify: [Feature Request] Elevation color

[maggot99999]

Problem to solve

• Adds ability to customize color for elevation.
• Adds better elevation effect since black color of elevation not always suitable for all color-based components

Proposed solution

• Add color property to hover component
• Inherent color from component eg. inherent blue color of button to elevation.

[johnleider]

Thank you for the Feature Request and interest in improving Vuetify. Unfortunately this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.

[ColinLaws]

I don't mean to beat a dead horse, but I just happened to need this functionality in an application that I am building. For some users who have cards with dark themes, they may better emphasize elevation by using color.

For example, the elevation difference between the top and bottom cards in this image are not easily distinguishable. This is using Vuetify's built in dark mode. Again, color could probably really help here, although I understand it's not exactly material design spec.

[maggot99999]

Is there any objective reason this functionality should not be implemented even if Google, the publisher of Material design philosophy uses this color elevation in their own designs lately?

[michaelmov]

I was able to change the elevation color by overriding the following 3 variables in my project's variables.scss file with my custom color :

$shadow-key-umbra-opacity: rgba(#1a237e, 0.2);
$shadow-key-penumbra-opacity: rgba(#1a237e, 0.14);
$shadow-key-ambient-opacity: rgba(#1a237e, 0.12);

[ColinLaws]

Thanks so much for this @michaelmov I didn't want to waste valuable time changing small front end visuals. This will help me better emphasize hovering cards, especially in dark mode.

[jffaust]

I would also like to know why this is not being considered. Material Design documentation for dark themes clearly uses color to represent elevation: https://www.material.io/design/color/dark-theme.html#properties

[awtkns]

If anyone is still having trouble solving this, I published a package to solve this issue.

[shubh9415]

You can achive this using :root.

:root /deep/ .v-application .elevation-3{
box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.01), 0px 3px 5px 0px rgba(0, 0, 0, 0), 0px 1px 11px 1px rgba(0, 0, 0, 0.1) !important;
}