diff --git a/themes/metro.yaml b/themes/metro.yaml
index 8c8bea4..de8ab19 100644
--- a/themes/metro.yaml
+++ b/themes/metro.yaml
@@ -284,9 +284,9 @@ ________________________________________Common Base 2 (Do Not Use):
       disabled-text-color: "rgba(255,255,255,.55)"
 
       # Other Mode Specific Variables
-      mdc-dialog-scrim-color: rgba(0, 0, 0, 0.5)
+      mdc-dialog-scrim-color: "rgba(0, 0, 0, 0.5)"
       dialog-backdrop-filter: none
-      mdc-dialog-box-shadow: 0 0px 16px 4px rgba(var(--rgb-accent-color), .15), 0 16px 64px 32px rgba(var(--rgb-primary-color), .5)
+      dialog-box-shadow: var(--rgb-accent-color)
       slider-thumb-color: "#121212"
 
       sidebar-icon-color: var(--secondary-text-color)
@@ -311,7 +311,7 @@ ________________________________________Common Base 2 (Do Not Use):
       # Other Mode Specific Variables
       mdc-dialog-scrim-color: rgba(var(--rgb-primary-background-color),.667)
       dialog-backdrop-filter: none
-      mdc-dialog-box-shadow: 0 8px 16px 4px rgb(0 0 0 / 25%), 0 48px 64px 32px rgb(0 0 0 / 20%)
+      dialog-box-shadow: var(--rgb-primary-text-color)
       slider-thumb-color: "#E8E8E8"
 
       sidebar-icon-color: rgba(0,0,0,.5)
@@ -435,6 +435,9 @@ ________________________________________Common Base 3 (Do Not Use): &common-card
           background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
         }
       }
+      .mdc-dialog__surface {
+        box-shadow: 0 0px 16px 4px rgba(var(--dialog-box-shadow), .15), 0 16px 64px 32px rgba(var(--dialog-box-shadow), .5) !important;
+      }
     ha-header-bar$: |
       .mdc-top-app-bar {
         background: none !important;