diff --git a/core/src/components/content/content.ionic.scss b/core/src/components/content/content.ionic.scss
new file mode 100644
index 0000000000..623bf6be5d
--- /dev/null
+++ b/core/src/components/content/content.ionic.scss
@@ -0,0 +1,8 @@
+@import "./content.scss";
+
+// Ionic Content
+// --------------------------------------------------
+
+:host(.in-modal) {
+  --background: var(--ion-bg-surface-default, var(--ion-primitives-base-white));
+}
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index aef15c9c00..b9d5c6516e 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -24,8 +24,12 @@ import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
  */
 @Component({
   tag: 'ion-content',
-  styleUrl: 'content.scss',
   shadow: true,
+  styleUrls: {
+    ios: 'content.scss',
+    md: 'content.scss',
+    ionic: 'content.ionic.scss',
+  },
 })
 export class Content implements ComponentInterface {
   private watchDog: ReturnType<typeof setInterval> | null = null;
@@ -458,6 +462,7 @@ export class Content implements ComponentInterface {
           'content-sizing': hostContext('ion-popover', this.el),
           overscroll: forceOverscroll,
           [`content-${rtl}`]: true,
+          'in-modal': hostContext('ion-modal', this.el),
         })}
         style={{
           '--offset-top': `${this.cTop}px`,
diff --git a/core/src/components/header/header.ionic.scss b/core/src/components/header/header.ionic.scss
index 8c7cc21fd1..89b02b8294 100644
--- a/core/src/components/header/header.ionic.scss
+++ b/core/src/components/header/header.ionic.scss
@@ -11,6 +11,10 @@ ion-header {
   &.header-divider {
     border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-primitives-neutral-300;
   }
+
+  &.in-modal {
+    --background: var(--ion-bg-surface-default, var(--ion-primitives-base-white));
+  }
 }
 
 ion-toolbar + ion-toolbar {
diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx
index ab87f2c82e..cc17c96831 100644
--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -236,6 +236,7 @@ export class Header implements ComponentInterface {
           [`header-collapse-${collapse}`]: true,
           [`header-translucent-${theme}`]: this.translucent,
           ['header-divider']: divider,
+          'in-modal': hostContext('ion-modal', this.el),
         }}
         {...inheritedAttributes}
       >