[Feature Request] Elevation levels in dark mode improvement

[rszamszur]

Problem to solve

According to Material Design and Material Dark Theme Design Kit
elevation level 00dp (0% overlay) should have the same color as the surface, and the rest of the levels are being calculated from it by adding an appropriate overlay.

At present in Vuetify _dark.scss both background and surface color are #121212 but elevation level 00dp is #000000. Moreover, rest colors have hardcoded values.

I know you allow elevation colors to be overridden. Still, I think calculating them based on surface color might be helpful, especially for those who want to customize dark mode without knowledge about Material design and how all the colors and components work together.
For instance, if one changes the background color, all elevation levels will have the same values, and as a result, the whole custom theme will look odd/not matching.
Lastly, if someone wants to override elevation colors beyond MD guidelines, there are still the means to do so.

Proposed solution

@import '../tools/_functions.sass';
@use "sass:color";

$surface: #121212;

$material-dark-elevation-colors: () !default;
// https://material.io/design/color/dark-theme.html#properties
// https://material.io/design/environment/elevation.html#default-elevations
$material-dark-elevation-colors: map-deep-merge(
  (
   '0': $surface,
   '1': color.scale($surface, $lightness: 05%),
   '2': color.scale($surface, $lightness: 07%),
   '3': color.scale($surface, $lightness: 08%),
   '4': color.scale($surface, $lightness: 09%),
   '6': color.scale($surface, $lightness: 11%),
   '8': color.scale($surface, $lightness: 12%),
   '12': color.scale($surface, $lightness: 14%),
   '16': color.scale($surface, $lightness: 15%),
   '24': color.scale($surface, $lightness: 16%),
  ),
  $material-dark-elevation-colors
);

$material-dark: () !default;
$material-dark: map-deep-merge(
    ...
    ... 
    'background': $surface,
    'surface': $surface,
    ...
    ...
  ),
  $material-dark
);

I can create PR for the solution if you'd like.

[kappaflow]

Proposed solution

The proposed solution is missing levels. Based on this video from Material Design Guidelines, in-between levels shouldn't have the basic $surface level color.

I think the elevation background color for a dark theme should look like this (in exception of being semitransparent) to follow Material Design Guidelines.