feat(modal): ensure header and content background color is inherit from modal

Author: joselrio

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));
+}

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`,

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 {

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}
       >