[Feature Request] Add MD3 Scrim Color Variables for Overlays in Vuetify

[BobYue-01]

Problem to solve

Vuetify currently uses the Material Design 2 color system, which does not include a specific color variable for overlay-scrim-background required by components like dialogs. As a result, the following setting is used:

// components/VOverlay/_variables.scss
$overlay-scrim-background: rgb(var(--v-theme-on-surface)) !default;

In dark themes, the on-surface color is pure white (#FFFFFF), leading to a semi-transparent white overlay. This can be very glaring and does not comply with Material Design guidelines.

Minimal Reproduction: Vuetify Playground

Material Design 3 (MD3) provides dedicated color roles for Scrim and Shadow (md.sys.color.scrim, md.sys.color.shadow), both defaulting to pure black (#000000) in light and dark themes. Utilizing these variables for $overlay-scrim-background can enhance visual consistency and user experience, especially in dark themes.

Proposed solution

1. Introduce new color variables in Vuetify's theme system to align with MD3 standards:
   • --v-theme-scrim
   • --v-theme-shadow
2. Ensure the default values for these new variables are set to pure black (#000000) for both light and dark themes.
3. Update the overlay-scrim-background setting to reference --v-theme-scrim:

// components/VOverlay/_variables.scss
$overlay-scrim-background: var(--v-theme-scrim) !default;

This change will provide a more consistent and visually appealing experience across different themes and align Vuetify with the latest Material Design specifications.

[J-Sek]

I generally agree that for dark themes white-ish overlay does not feel right, but MD3 is not exactly clear about it either... at least for me it is pretty vague.

To help us decide, I included a demo on Vuetify Studio that lets us fiddle with the options and test them with different themes.