diff --git a/src/core/components/iframe/iframe.scss b/src/core/components/iframe/iframe.scss
index 67a48e598..d50e6d82e 100644
--- a/src/core/components/iframe/iframe.scss
+++ b/src/core/components/iframe/iframe.scss
@@ -9,7 +9,7 @@
         border: 0;
         display: block;
         max-width: 100%;
-        background-color: var(--gray-light);
+        background-color: var(--ion-background-color);
     }
 
     .core-loading-container {
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index d088270be..8461285ed 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -730,3 +730,10 @@ ion-content.disable-scroll-y::part(scroll) {
     z-index: auto;
     will-change: auto;
 }
+
+iframe {
+    border: 0;
+    display: block;
+    max-width: 100%;
+    background-color: var(--ion-background-color);
+}