diff --git a/resources/assets/js/components/MicroApps/index.vue b/resources/assets/js/components/MicroApps/index.vue
index f8de2a952..2b2aea70e 100644
--- a/resources/assets/js/components/MicroApps/index.vue
+++ b/resources/assets/js/components/MicroApps/index.vue
@@ -7,6 +7,7 @@
             :ref="`ref-${app.name}`"
             :size="1200"
             :options="app"
+            :windowType="windowType"
             :beforeClose="onBeforeClose"
             @on-capsule-more="onCapsuleMore"
             @on-popout-window="onPopoutWindow"
@@ -72,8 +73,10 @@
 }
 
 .transparent-mode {
-    .micro-app-loader {
-        background-color: rgba(255, 255, 255, 0.6);
+    &:not(.popout-window) {
+        .micro-app-loader {
+            background-color: rgba(255, 255, 255, 0.6);
+        }
     }
 }
 
diff --git a/resources/assets/js/components/MicroApps/modal.vue b/resources/assets/js/components/MicroApps/modal.vue
index ca2a8d04c..bc81d036f 100644
--- a/resources/assets/js/components/MicroApps/modal.vue
+++ b/resources/assets/js/components/MicroApps/modal.vue
@@ -71,6 +71,10 @@ export default {
             type: Object,
             default: () => ({})
         },
+        windowType: {
+            type: String,
+            default: 'embed',
+        },
         beforeClose: Function
     },
     data() {
@@ -90,6 +94,7 @@ export default {
                 'micro-modal-hidden': !this.open,
                 'no-dark-content': !this.options.auto_dark_theme,
                 'transparent-mode': !!this.options.transparent,
+                [`${this.windowType}-window`]: true,
             }
         },
         transitions() {
@@ -430,6 +435,12 @@ body.dark-mode-reverse {
                 --modal-body-background-color: #000000;
             }
         }
+        &.popout-window {
+            &.no-dark-content {
+                --modal-dark-filter: invert(100%) hue-rotate(180deg) contrast(100%);
+                --modal-body-background-color: #000000;
+            }
+        }
     }
 }
 </style>