Modal Dark mode message readability improvement (#3474)

packages/admin-ui/src/lib/core/src/shared/components/modal-dialog/modal-dialog.component.scss

@@ -17,17 +17,40 @@
         display: flex;
         flex-direction: column;
     }
+
     @media screen and (max-height: 700px) {
         .modal-dialog .modal-content {
             padding: 0.8rem;
         }
-        .modal-header, .modal-header--accessible {
+        .modal-header,
+        .modal-header--accessible {
             padding-bottom: 0.8rem;
         }
         .modal-footer {
             padding-top: 0.8rem;
         }
     }
+
+    // Dark Theme Styles
+    :host-context([data-theme="dark"]) & {
+        .modal-dialog {
+            background-color: var(--color-weight-150);
+            color: var(--color-text-100);
+            border: 1px solid var(--color-component-border-100);
+            box-shadow: 0 0 0 1px var(--color-component-border-200),
+                        0 4px 12px rgba(0, 0, 0, 0.6);
+        }
+
+        .modal-title,
+        .modal-body,
+        .modal-footer {
+            color: var(--color-text-100);
+        }
+
+        button {
+            color: var(--color-button-small-text);
+        }
+    }
 }
 
 .modal-body {