diff --git a/core/api.txt b/core/api.txt
index f2af11afc9b..e95bcfc0f98 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -800,7 +800,6 @@ ion-content,prop,mode,"ios" | "md",undefined,false,false
 ion-content,prop,scrollEvents,boolean,false,false,false
 ion-content,prop,scrollX,boolean,false,false,false
 ion-content,prop,scrollY,boolean,true,false,false
-ion-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-content,method,getScrollElement,getScrollElement() => Promise<HTMLElement>
 ion-content,method,scrollByPoint,scrollByPoint(x: number, y: number, duration: number) => Promise<void>
 ion-content,method,scrollToBottom,scrollToBottom(duration?: number) => Promise<void>
@@ -809,15 +808,14 @@ ion-content,method,scrollToTop,scrollToTop(duration?: number) => Promise<void>
 ion-content,event,ionScroll,ScrollDetail,true
 ion-content,event,ionScrollEnd,ScrollBaseDetail,true
 ion-content,event,ionScrollStart,ScrollBaseDetail,true
-ion-content,css-prop,--background
-ion-content,css-prop,--color
-ion-content,css-prop,--keyboard-offset
-ion-content,css-prop,--offset-bottom
-ion-content,css-prop,--offset-top
-ion-content,css-prop,--padding-bottom
-ion-content,css-prop,--padding-end
-ion-content,css-prop,--padding-start
-ion-content,css-prop,--padding-top
+ion-content,css-prop,--ion-content-background
+ion-content,css-prop,--ion-content-color
+ion-content,css-prop,--ion-content-font-family
+ion-content,css-prop,--ion-content-overflow
+ion-content,css-prop,--ion-content-padding-bottom
+ion-content,css-prop,--ion-content-padding-end
+ion-content,css-prop,--ion-content-padding-start
+ion-content,css-prop,--ion-content-padding-top
 ion-content,part,background
 ion-content,part,scroll
 
diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js
index f47b2cf670d..1e0d7418c41 100644
--- a/core/scripts/testing/scripts.js
+++ b/core/scripts/testing/scripts.js
@@ -24,7 +24,7 @@ const DEFAULT_THEME = 'md';
 const DEFAULT_PALETTE = 'light';
 
 (function() {
-  
+
   /**
    * The `rtl` param is used to set the directionality of the 
    * document. This can be `true` or `false`.
@@ -128,6 +128,27 @@ const DEFAULT_PALETTE = 'light';
     );
   }
 
+  /**
+   * Deep merges two objects, with source properties overriding target properties
+   * @param target The target object to merge into
+   * @param source The source object to merge from
+   * @returns The merged object
+   */
+  // TODO(FW-6750): Remove this once the theme tokens can be imported directly into the test pages
+  const deepMerge = (target, source) => {
+    const result = { ...target };
+  
+    for (const key in source) {
+      if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+        result[key] = deepMerge(result[key] ?? {}, source[key]);
+      } else {
+        result[key] = source[key];
+      }
+    }
+    return result;
+  };
+
+  // TODO(FW-6750): Determine if this function can be removed once the theme tokens can be imported directly into the test pages
   async function loadThemeTokens(themeName, paletteName) {
     try {
       // Store existing theme set from the app initialization
@@ -138,14 +159,7 @@ const DEFAULT_PALETTE = 'light';
 
       // Merge with existing theme to preserve any customizations
       if (customTheme) {
-        theme = {
-          ...theme,
-          ...customTheme,
-          palette: {
-            ...theme.palette,
-            ...customTheme.palette,
-          },
-        };
+        theme = deepMerge(theme, customTheme);
       }
 
       // If a specific palette is requested, modify the palette structure
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index fb7e5f9cff6..8212cdfa246 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -16,7 +16,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { IonChipFill, IonChipHue, IonChipShape, IonChipSize } from "./components/chip/chip.interfaces";
-import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
+import { ScrollBaseDetail, ScrollDetail } from "./components/content/content.interfaces";
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
@@ -58,7 +58,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { IonChipFill, IonChipHue, IonChipShape, IonChipSize } from "./components/chip/chip.interfaces";
-export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
+export { ScrollBaseDetail, ScrollDetail } from "./components/content/content.interfaces";
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
@@ -1118,10 +1118,6 @@ export namespace Components {
           * @default true
          */
         "scrollY": boolean;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonDatetime {
         /**
@@ -7052,10 +7048,6 @@ declare namespace LocalJSX {
           * @default true
          */
         "scrollY"?: boolean;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonDatetime {
         /**
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 2a2f85bb456..495e8421015 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -143,7 +143,6 @@
   flex-shrink: 2;
   overscroll-behavior-y: contain;
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
   pointer-events: all;
 
   background: var(--background);
diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
index 714efc03baf..b31b2577b3a 100644
--- a/core/src/components/alert/alert.ios.scss
+++ b/core/src/components/alert/alert.ios.scss
@@ -148,7 +148,6 @@
 
   border-top: $alert-ios-list-border-top;
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
 }
 
 .alert-tappable {
diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
index 9948a4127a9..0382b6bb898 100644
--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.scss
@@ -94,7 +94,6 @@
 .alert-message,
 .alert-input-group {
   box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   overscroll-behavior-y: contain;
 }
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 755182fc4d2..edfe607838f 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2e934d1a783..2568ea5cfe3 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index fe0ff96e586..b6c4e813296 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index cfdd6297ba1..cdd772f1049 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 40f4c1f0eb3..4096a5b9b6c 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 8d6308e8c45..c8908d7a15a 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 69fce0e831c..edfe607838f 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2e934d1a783..2568ea5cfe3 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index fe0ff96e586..b6c4e813296 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index ef06aedfcf9..f237e7885c9 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d42d2e749be..3367531f71d 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index 2ecec60b4ec..b328ec1c7b7 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/shape/index.html b/core/src/components/card/test/shape/index.html
index 77eaf9301ab..321998795a4 100644
--- a/core/src/components/card/test/shape/index.html
+++ b/core/src/components/card/test/shape/index.html
@@ -9,16 +9,33 @@
     />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: '#dde2ef',
+                padding: {
+                  start: '16px',
+                  end: '16px',
+                  top: '16px',
+                  bottom: '16px',
+                },
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <!-- Styles only for testing purposes to identify the card shape -->
     <style>
-      ion-content {
-        --background: #dde2ef;
-      }
-
       .container {
         padding: 8px;
       }
@@ -33,7 +50,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
+      <ion-content class="ion-text-center" id="content" no-bounce>
         <h1>Default</h1>
         <div id="default" class="container">
           <ion-card>
diff --git a/core/src/components/card/test/theme-ionic/index.html b/core/src/components/card/test/theme-ionic/index.html
index 1525cdaba70..5eab10098d9 100644
--- a/core/src/components/card/test/theme-ionic/index.html
+++ b/core/src/components/card/test/theme-ionic/index.html
@@ -10,14 +10,26 @@
     />
     <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: '#dde2ef',
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <style>
-      ion-content {
-        --background: #dde2ef;
-      }
       .ion-margin-top {
         margin-top: 32px;
       }
@@ -32,7 +44,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding-space-400" id="content" no-bounce>
+      <ion-content id="content" no-bounce>
         <h4>Preview options</h4>
 
         <p>
diff --git a/core/src/components/content/content-interface.ts b/core/src/components/content/content.interfaces.ts
similarity index 69%
rename from core/src/components/content/content-interface.ts
rename to core/src/components/content/content.interfaces.ts
index c4e04431c2e..117407c6503 100644
--- a/core/src/components/content/content-interface.ts
+++ b/core/src/components/content/content.interfaces.ts
@@ -1,4 +1,5 @@
 import type { GestureDetail } from '../../interface';
+import type { IonPadding } from '../../themes/themes.interfaces';
 
 export interface ScrollBaseDetail {
   isScrolling: boolean;
@@ -19,3 +20,15 @@ export interface ScrollBaseCustomEvent extends CustomEvent {
 export interface ScrollCustomEvent extends ScrollBaseCustomEvent {
   detail: ScrollDetail;
 }
+
+export interface IonContentRecipe {
+  background?: string;
+  color?: string;
+
+  font?: {
+    family?: string;
+  };
+
+  overflow?: string;
+  padding?: IonPadding;
+}
diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
index de81ebc89b4..95df0bb3fc5 100644
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -1,34 +1,27 @@
-@import "../../themes/native/native.globals";
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.color" as color;
 
 // Content
 // --------------------------------------------------
 
 :host {
   /**
-   * @prop --background: Background of the content
+   * @prop --ion-content-background: Background of the content
    *
-   * @prop --color: Color of the content
+   * @prop --ion-content-color: Color of the content
    *
-   * @prop --padding-top: Top padding of the content
-   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content
-   * @prop --padding-bottom: Bottom padding of the content
-   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content
+   * @prop --ion-content-font-family: Font family of the content
    *
-   * @prop --keyboard-offset: Keyboard offset of the content
+   * @prop --ion-content-overflow: Overflow behavior of the scrollable area
    *
-   * @prop --offset-top: Offset top of the content
-   * @prop --offset-bottom: Offset bottom of the content
+   * @prop --ion-content-padding-top: Top padding of the content
+   * @prop --ion-content-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content
+   * @prop --ion-content-padding-bottom: Bottom padding of the content
+   * @prop --ion-content-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content
    */
-  --background: #{$background-color};
-  --color: #{$text-color};
-  --padding-top: 0px;
-  --padding-bottom: 0px;
-  --padding-start: 0px;
-  --padding-end: 0px;
-  --keyboard-offset: 0px;
-  --offset-top: 0px;
-  --offset-bottom: 0px;
-  --overflow: auto;
+  --internal-keyboard-offset: 0px;
+  --internal-offset-top: 0px;
+  --internal-offset-bottom: 0px;
 
   display: block;
   position: relative;
@@ -44,36 +37,31 @@
   padding: 0 !important;
   /* stylelint-enable */
 
-  font-family: $font-family-base;
+  font-family: var(--ion-content-font-family);
 
   contain: size style;
 }
 
-:host(.ion-color) .inner-scroll {
-  background: current-color(base);
-  color: current-color(contrast);
-}
-
-#background-content {
-  @include position(calc(var(--offset-top) * -1), 0px, calc(var(--offset-bottom) * -1), 0px);
-
-  position: absolute;
-
-  background: var(--background);
-}
+// Content Inner Scroll
+// ---------------------------------------------
 
 .inner-scroll {
-  @include position(calc(var(--offset-top) * -1), 0px, calc(var(--offset-bottom) * -1), 0px);
-  @include padding(
-    calc(var(--padding-top) + var(--offset-top)),
-    var(--padding-end),
-    calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)),
-    var(--padding-start)
+  $padding-top: var(--padding-top, var(--ion-content-padding-top, 0px));
+  $padding-end: var(--padding-end, var(--ion-content-padding-end, 0px));
+  $padding-bottom: var(--padding-bottom, var(--ion-content-padding-bottom, 0px));
+  $padding-start: var(--padding-start, var(--ion-content-padding-start, 0px));
+
+  @include mixins.position(calc(var(--internal-offset-top) * -1), 0px, calc(var(--internal-offset-bottom) * -1), 0px);
+  @include mixins.padding(
+    calc(#{$padding-top} + var(--internal-offset-top)),
+    $padding-end,
+    calc(#{$padding-bottom} + var(--internal-keyboard-offset) + var(--internal-offset-bottom)),
+    $padding-start
   );
 
   position: absolute;
 
-  color: var(--color);
+  color: var(--ion-content-color);
 
   box-sizing: border-box;
 
@@ -89,10 +77,16 @@
   touch-action: pan-x pan-y pinch-zoom;
 }
 
+:host(.ion-color) .inner-scroll {
+  background: color.current-color(base);
+  color: color.current-color(contrast);
+}
+
+// Content Scroll
+// ---------------------------------------------
+
 .scroll-y,
 .scroll-x {
-  -webkit-overflow-scrolling: touch;
-
   /**
    * This adds `.inner-scroll` as part of the
    * stacking context in WebKit. Without it,
@@ -115,15 +109,29 @@
 }
 
 .scroll-y {
-  overflow-y: var(--overflow);
+  overflow-y: var(--ion-content-overflow);
   overscroll-behavior-y: contain;
 }
 
 .scroll-x {
-  overflow-x: var(--overflow);
+  overflow-x: var(--ion-content-overflow);
   overscroll-behavior-x: contain;
 }
 
+// Content Background
+// ---------------------------------------------
+
+#background-content {
+  @include mixins.position(calc(var(--internal-offset-top) * -1), 0px, calc(var(--internal-offset-bottom) * -1), 0px);
+
+  position: absolute;
+
+  background: var(--ion-content-background);
+}
+
+// Content Overscroll
+// ---------------------------------------------
+
 .overscroll::before,
 .overscroll::after {
   position: absolute;
@@ -142,6 +150,9 @@
   top: -1px;
 }
 
+// Content Sizing
+// ---------------------------------------------
+
 :host(.content-sizing) {
   display: flex;
 
@@ -159,6 +170,7 @@
 
   contain: none;
 }
+
 :host(.content-sizing) .inner-scroll {
   position: relative;
 
@@ -172,11 +184,37 @@
   top: 0;
   bottom: 0;
 
-  margin-top: calc(var(--offset-top) * -1);
-  margin-bottom: calc(var(--offset-bottom) * -1);
+  margin-top: calc(var(--internal-offset-top) * -1);
+  margin-bottom: calc(var(--internal-offset-bottom) * -1);
 }
 
+// Content Slotted Elements
+// ---------------------------------------------
+
+// Elements with the "fixed" slot
+::slotted([slot="fixed"]) {
+  position: absolute;
+
+  /**
+   * When presenting ion-content inside of an ion-modal, the .inner-scroll
+   * element is composited. In WebKit, the fixed content is not composited
+   * causing it to appear under the main scrollable content as a result.
+   * The fixed content is correctly composited in other browsers. Adding
+   * the translateZ forces the fixed content to be composited so it correctly
+   * shows on top of the scrollable content. Setting a negative z-index will
+   * still allow the fixed content to appear under the scroll content if specified.
+   */
+  transform: translateZ(0);
+}
+
+// Content: iOS Mode Transition
+// The transition shadow effect is only animated by the iOS transition
+// builder, so these styles are only rendered in iOS mode.
+// ---------------------------------------------
+
 .transition-effect {
+  @include mixins.position-horizontal(-100%);
+
   display: none;
   position: absolute;
 
@@ -188,18 +226,6 @@
   pointer-events: none;
 }
 
-:host(.content-ltr) .transition-effect {
-  /* stylelint-disable property-disallowed-list */
-  left: -100%;
-  /* stylelint-enable property-disallowed-list */
-}
-
-:host(.content-rtl) .transition-effect {
-  /* stylelint-disable property-disallowed-list */
-  right: -100%;
-  /* stylelint-enable property-disallowed-list */
-}
-
 .transition-cover {
   position: absolute;
 
@@ -216,6 +242,8 @@
 }
 
 .transition-shadow {
+  @include mixins.position-horizontal(null, 0);
+
   display: block;
   position: absolute;
 
@@ -225,34 +253,6 @@
   box-shadow: inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);
 }
 
-:host(.content-ltr) .transition-shadow {
-  /* stylelint-disable property-disallowed-list */
-  right: 0;
-  /* stylelint-enable property-disallowed-list */
-}
-
 :host(.content-rtl) .transition-shadow {
-  /* stylelint-disable property-disallowed-list */
-  left: 0;
-  /* stylelint-enable property-disallowed-list */
-
   transform: scaleX(-1);
 }
-
-// Content: Fixed
-// --------------------------------------------------
-
-::slotted([slot="fixed"]) {
-  position: absolute;
-
-  /**
-   * When presenting ion-content inside of an ion-modal, the .inner-scroll
-   * element is composited. In WebKit, the fixed content is not composited
-   * causing it to appear under the main scrollable content as a result.
-   * The fixed content is correctly composited in other browsers. Adding
-   * the translateZ forces the fixed content to be composited so it correctly
-   * shows on top of the scrollable content. Setting a negative z-index will
-   * still allow the fixed content to appear under the scroll content if specified.
-   */
-  transform: translateZ(0);
-}
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 0c09660b9aa..fc84f4432e7 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -1,20 +1,19 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
-import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from '@utils/helpers';
+import { hasLazyBuild, inheritAriaAttributes, waitForComponent } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { isPlatform } from '@utils/platform';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
 
 import { config } from '../../global/config';
-import { getIonMode, getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, Mode } from '../../interface';
 
-import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
+import type { ScrollBaseDetail, ScrollDetail } from './content.interfaces';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed in the scrollable area if provided without a slot.
  * @slot fixed - Should be used for fixed content that should not scroll.
@@ -245,7 +244,7 @@ export class Content implements ComponentInterface {
      * The `hydrateDocument` function in `@stencil/core` will render the `ion-content`, but
      * `forceUpdate` will trigger another render, locking up the server.
      *
-     * TODO: Remove if STENCIL-834 determines Stencil will account for this.
+     * TODO(STENCIL-834): Remove if Stencil will account for this.
      */
     if (Build.isBrowser) {
       if (this.fullscreen) {
@@ -313,10 +312,9 @@ export class Content implements ComponentInterface {
      * scrollEl won't be defined yet with the custom elements build, so wait for it to load in.
      */
     if (!this.scrollEl) {
-      await new Promise((resolve) => componentOnReady(this.el, resolve));
+      await waitForComponent(this.el);
     }
-
-    return Promise.resolve(this.scrollEl!);
+    return this.scrollEl!;
   }
 
   /**
@@ -326,9 +324,9 @@ export class Content implements ComponentInterface {
   @Method()
   async getBackgroundElement(): Promise<HTMLElement> {
     if (!this.backgroundContentEl) {
-      await new Promise((resolve) => componentOnReady(this.el, resolve));
+      await waitForComponent(this.el);
     }
-    return Promise.resolve(this.backgroundContentEl!);
+    return this.backgroundContentEl!;
   }
 
   /**
@@ -349,7 +347,7 @@ export class Content implements ComponentInterface {
   @Method()
   async scrollToBottom(duration = 0): Promise<void> {
     const scrollEl = await this.getScrollElement();
-    const y = scrollEl!.scrollHeight - scrollEl!.clientHeight;
+    const y = scrollEl.scrollHeight - scrollEl.clientHeight;
     return this.scrollToPoint(undefined, y, duration);
   }
 
@@ -454,10 +452,13 @@ export class Content implements ComponentInterface {
   render() {
     const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
-    const theme = getIonTheme(this);
     const mode = getIonMode(this);
     const forceOverscroll = this.shouldForceOverscroll(mode);
-    const transitionShadow = theme === 'ios';
+    /**
+     * The transition shadow effect is only animated by the iOS transition
+     * builder, so these elements are only rendered in iOS mode.
+     */
+    const transitionShadow = mode === 'ios';
 
     this.resize();
 
@@ -465,14 +466,13 @@ export class Content implements ComponentInterface {
       <Host
         role={isMainContent ? 'main' : undefined}
         class={createColorClasses(this.color, {
-          [theme]: true,
           'content-sizing': hostContext('ion-popover', this.el),
-          overscroll: forceOverscroll,
           [`content-${rtl}`]: true,
+          overscroll: forceOverscroll,
         })}
         style={{
-          '--offset-top': `${this.cTop}px`,
-          '--offset-bottom': `${this.cBottom}px`,
+          '--internal-offset-top': `${this.cTop}px`,
+          '--internal-offset-bottom': `${this.cBottom}px`,
         }}
         {...inheritedAttributes}
       >
diff --git a/core/src/components/content/test/basic/index.html b/core/src/components/content/test/basic/index.html
index 8c65e3b82e7..6aed6df44d5 100644
--- a/core/src/components/content/test/basic/index.html
+++ b/core/src/components/content/test/basic/index.html
@@ -26,7 +26,7 @@
       </ion-header>
 
       <div style="display: flex; flex: 1">
-        <ion-content class="ion-padding" style="text-align: center; flex: 2" id="content">
+        <ion-content id="content">
           <ion-content id="content-part">
             <f style="height: 50%"></f>
             <p>
@@ -136,6 +136,16 @@
           background: yellow;
         }
 
+        #content {
+          --ion-content-padding-start: 16px;
+          --ion-content-padding-end: 16px;
+          --ion-content-padding-top: 16px;
+          --ion-content-padding-bottom: 16px;
+
+          text-align: center;
+          flex: 2;
+        }
+
         ion-content#content-part::part(background) {
           background: #eee;
         }
diff --git a/core/src/components/content/test/content.spec.ts b/core/src/components/content/test/content.spec.ts
index 4dcf7f3e0a6..ee0f506ac0c 100644
--- a/core/src/components/content/test/content.spec.ts
+++ b/core/src/components/content/test/content.spec.ts
@@ -2,6 +2,54 @@ import { newSpecPage } from '@stencil/core/testing';
 
 import { Content } from '../content';
 
+describe('content: transition shadow', () => {
+  it('should render transition effect elements in ios mode', async () => {
+    const page = await newSpecPage({
+      components: [Content],
+      html: `<ion-content mode="ios"></ion-content>`,
+    });
+
+    const content = page.body.querySelector('ion-content')!;
+    expect(content.shadowRoot!.querySelector('.transition-effect')).not.toBeNull();
+  });
+
+  it('should not render transition effect elements in md mode', async () => {
+    const page = await newSpecPage({
+      components: [Content],
+      html: `<ion-content mode="md"></ion-content>`,
+    });
+
+    const content = page.body.querySelector('ion-content')!;
+    expect(content.shadowRoot!.querySelector('.transition-effect')).toBeNull();
+  });
+});
+
+describe('content: element refs', () => {
+  it('getScrollElement should return the scroll element', async () => {
+    const page = await newSpecPage({
+      components: [Content],
+      html: `<ion-content></ion-content>`,
+    });
+
+    const content = page.body.querySelector('ion-content')!;
+    const scrollEl = await content.getScrollElement();
+
+    expect(scrollEl).toBe(content.shadowRoot!.querySelector('[part="scroll"]'));
+  });
+
+  it('getBackgroundElement should return the background element', async () => {
+    const page = await newSpecPage({
+      components: [Content],
+      html: `<ion-content></ion-content>`,
+    });
+
+    const content = page.body.querySelector('ion-content')!;
+    const backgroundEl = await content.getBackgroundElement();
+
+    expect(backgroundEl).toBe(content.shadowRoot!.querySelector('[part="background"]'));
+  });
+});
+
 describe('content: fixed slot placement', () => {
   it('should should fixed slot after content', async () => {
     const page = await newSpecPage({
diff --git a/core/src/components/content/test/fullscreen/index.html b/core/src/components/content/test/fullscreen/index.html
index bf0cebade91..23df116d813 100644
--- a/core/src/components/content/test/fullscreen/index.html
+++ b/core/src/components/content/test/fullscreen/index.html
@@ -9,6 +9,28 @@
     />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: 'linear-gradient(90deg, blue, red)',
+                color: 'white',
+                padding: {
+                  start: '16px',
+                  end: '16px',
+                  top: '16px',
+                  bottom: '16px',
+                },
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
@@ -64,11 +86,6 @@
         --color: white;
       }
 
-      ion-content {
-        --background: linear-gradient(90deg, blue, red);
-        --color: white;
-      }
-
       p:first-child {
         margin-top: 0;
       }
diff --git a/core/src/components/content/test/standalone/index.html b/core/src/components/content/test/standalone/index.html
index daed419034d..acd5d4f94b5 100644
--- a/core/src/components/content/test/standalone/index.html
+++ b/core/src/components/content/test/standalone/index.html
@@ -15,7 +15,7 @@
   </head>
   <body>
     <div class="content-height">
-      <ion-content class="ion-padding">
+      <ion-content>
         <h1>Heading</h1>
         <h2>Heading</h2>
         <h3>Heading</h3>
@@ -28,7 +28,7 @@ <h6>Heading</h6>
     </div>
 
     <div class="content-height">
-      <ion-content class="ion-padding" color="secondary">
+      <ion-content color="secondary">
         <h1>Heading</h1>
         <h2>Heading</h2>
         <h3>Heading</h3>
@@ -41,7 +41,7 @@ <h6>Heading</h6>
     </div>
 
     <div class="content-height">
-      <ion-content class="ion-padding custom-color">
+      <ion-content class="custom-color">
         <h1>Heading</h1>
         <h2>Heading</h2>
         <h3>Heading</h3>
@@ -59,8 +59,8 @@ <h6>Heading</h6>
       }
 
       .custom-color {
-        --background: blue;
-        --color: white;
+        --ion-content-background: blue;
+        --ion-content-color: white;
         --hr-background: purple;
       }
     </style>
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 94829b29bdd..d2b2cbbd299 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -17,7 +17,7 @@ import {
 import type { NotchController } from '@utils/forms';
 import { createNotchController, checkInvalidState } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers';
+import { inheritAriaAttributes, debounceEvent, inheritAttributes, waitForComponent } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { createSlotMutationController } from '@utils/slot-mutation-controller';
 import type { SlotMutationController } from '@utils/slot-mutation-controller';
@@ -537,7 +537,7 @@ export class Input implements ComponentInterface {
      * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
      */
     if (!this.nativeInput) {
-      await new Promise((resolve) => componentOnReady(this.el, resolve));
+      await waitForComponent(this.el);
     }
     return Promise.resolve(this.nativeInput!);
   }
diff --git a/core/src/components/list-header/test/basic/index.html b/core/src/components/list-header/test/basic/index.html
index 165396b57a4..1e70a76f927 100644
--- a/core/src/components/list-header/test/basic/index.html
+++ b/core/src/components/list-header/test/basic/index.html
@@ -10,6 +10,21 @@
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../css/ionic/link.ionic.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: '#f1f1f1',
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
@@ -81,11 +96,5 @@
         </ion-list>
       </ion-content>
     </ion-app>
-
-    <style>
-      ion-content {
-        --background: #f1f1f1;
-      }
-    </style>
   </body>
 </html>
diff --git a/core/src/components/list/test/inset/index.html b/core/src/components/list/test/inset/index.html
index 23f3f9a2271..83de999dfbb 100644
--- a/core/src/components/list/test/inset/index.html
+++ b/core/src/components/list/test/inset/index.html
@@ -9,6 +9,21 @@
     />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: '#e5e5e5',
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
@@ -92,11 +107,5 @@
         </ion-list>
       </ion-content>
     </ion-app>
-
-    <style>
-      ion-content {
-        background: #e5e5e5;
-      }
-    </style>
   </body>
 </html>
diff --git a/core/src/components/list/test/shape/index.html b/core/src/components/list/test/shape/index.html
index f65d6052e94..e5f95b27f73 100644
--- a/core/src/components/list/test/shape/index.html
+++ b/core/src/components/list/test/shape/index.html
@@ -9,14 +9,24 @@
     />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: '#e5e5e5',
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      ion-content {
-        --background: #e5e5e5;
-      }
-    </style>
   </head>
 
   <body>
diff --git a/core/src/components/list/test/shape/list.e2e.ts b/core/src/components/list/test/shape/list.e2e.ts
index 76ca85311eb..4b27340e21e 100644
--- a/core/src/components/list/test/shape/list.e2e.ts
+++ b/core/src/components/list/test/shape/list.e2e.ts
@@ -9,7 +9,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             ion-content {
-              --background: #e5e5e5;
+              --ion-content-background: #e5e5e5;
             }
           </style>
 
@@ -45,7 +45,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             ion-content {
-              --background: #e5e5e5;
+              --ion-content-background: #e5e5e5;
             }
           </style>
 
@@ -86,7 +86,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             ion-content {
-              --background: #e5e5e5;
+              --ion-content-background: #e5e5e5;
             }
           </style>
 
@@ -122,7 +122,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             ion-content {
-              --background: #e5e5e5;
+              --ion-content-background: #e5e5e5;
             }
           </style>
 
@@ -163,7 +163,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             ion-content {
-              --background: #e5e5e5;
+              --ion-content-background: #e5e5e5;
             }
           </style>
 
@@ -199,7 +199,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             ion-content {
-              --background: #e5e5e5;
+              --ion-content-background: #e5e5e5;
             }
           </style>
 
diff --git a/core/src/components/popover/test/arrow/index.html b/core/src/components/popover/test/arrow/index.html
index a5bd12f420e..161169490a5 100644
--- a/core/src/components/popover/test/arrow/index.html
+++ b/core/src/components/popover/test/arrow/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <style>
       ion-app > ion-content {
-        --background: #dddddd;
+        --ion-content-background: #dddddd;
       }
       .grid {
         display: grid;
diff --git a/core/src/components/popover/test/position/index.html b/core/src/components/popover/test/position/index.html
index ffb8e6fce30..f3118399a6f 100644
--- a/core/src/components/popover/test/position/index.html
+++ b/core/src/components/popover/test/position/index.html
@@ -15,7 +15,7 @@
 
     <style>
       ion-app > ion-content {
-        --background: #dddddd;
+        --ion-content-background: #dddddd;
       }
       .grid {
         display: grid;
diff --git a/core/src/components/popover/test/size/index.html b/core/src/components/popover/test/size/index.html
index 1ce48a75cb6..5550e6ccd55 100644
--- a/core/src/components/popover/test/size/index.html
+++ b/core/src/components/popover/test/size/index.html
@@ -14,7 +14,7 @@
 
     <style>
       ion-app > ion-content {
-        --background: #dddddd;
+        --ion-content-background: #dddddd;
       }
       ion-content button.trigger {
         padding: 12px 16px;
diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index 7a6e66b232e..dcf1e565b2b 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -604,7 +604,7 @@ export class Refresher implements ComponentInterface {
      * element to ensure that the refresher is shown.
      */
     if (this.contentFullscreen && this.backgroundContentEl) {
-      this.backgroundContentEl.style.setProperty('--offset-top', '0px');
+      this.backgroundContentEl.style.setProperty('--internal-offset-top', '0px');
     }
   }
 
@@ -783,7 +783,7 @@ export class Refresher implements ComponentInterface {
        * does not change when refreshing is complete.
        */
       if (this.contentFullscreen && this.backgroundContentEl) {
-        this.backgroundContentEl?.style.removeProperty('--offset-top');
+        this.backgroundContentEl?.style.removeProperty('--internal-offset-top');
       }
     }, 600);
 
diff --git a/core/src/components/refresher/refresher.utils.ts b/core/src/components/refresher/refresher.utils.ts
index 4becab356d0..e2f178e6064 100644
--- a/core/src/components/refresher/refresher.utils.ts
+++ b/core/src/components/refresher/refresher.utils.ts
@@ -1,6 +1,6 @@
 import { writeTask } from '@stencil/core';
 import { createAnimation } from '@utils/animation/animation';
-import { clamp, componentOnReady, transitionEndAsync } from '@utils/helpers';
+import { clamp, waitForComponent, transitionEndAsync } from '@utils/helpers';
 
 // MD Native Refresher
 // -----------------------------
@@ -219,7 +219,7 @@ export const shouldUseNativeRefresher = async (referenceEl: HTMLIonRefresherElem
     return Promise.resolve(false);
   }
 
-  await new Promise((resolve) => componentOnReady(refresherContent, resolve));
+  await waitForComponent(refresherContent);
 
   const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
   const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
diff --git a/core/src/components/router/utils/dom.ts b/core/src/components/router/utils/dom.ts
index c10b34d0840..7963e43b3d1 100644
--- a/core/src/components/router/utils/dom.ts
+++ b/core/src/components/router/utils/dom.ts
@@ -1,4 +1,4 @@
-import { componentOnReady } from '@utils/helpers';
+import { waitForComponent } from '@utils/helpers';
 import { printIonError } from '@utils/logging';
 
 import type { AnimationBuilder } from '../../../interface';
@@ -30,7 +30,7 @@ export const writeNavState = async (
     if (index >= chain.length || !outlet) {
       return changed;
     }
-    await new Promise((resolve) => componentOnReady(outlet, resolve));
+    await waitForComponent(outlet);
 
     const route = chain[index];
     const result = await outlet.setRouteId(route.id, route.params, direction, animation);
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 4d1047f914f..cbe2c754bee 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -3,7 +3,7 @@ import magnifyingGlassRegular from '@phosphor-icons/core/assets/regular/magnifyi
 import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
-import { debounceEvent, raf, componentOnReady, inheritAttributes } from '@utils/helpers';
+import { debounceEvent, raf, waitForComponent, inheritAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -349,7 +349,7 @@ export class Searchbar implements ComponentInterface {
      * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
      */
     if (!this.nativeInput) {
-      await new Promise((resolve) => componentOnReady(this.el, resolve));
+      await waitForComponent(this.el);
     }
     return Promise.resolve(this.nativeInput!);
   }
diff --git a/core/src/components/segment/test/layout/index.html b/core/src/components/segment/test/layout/index.html
index fa31e0b5724..f1618225c9f 100644
--- a/core/src/components/segment/test/layout/index.html
+++ b/core/src/components/segment/test/layout/index.html
@@ -9,15 +9,26 @@
     />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: '#f8f8f8',
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <style>
-      ion-content {
-        --background: #f8f8f8;
-      }
-
       ion-segment {
         margin: 10px 0;
       }
diff --git a/core/src/components/select-modal/select-modal.ionic.scss b/core/src/components/select-modal/select-modal.ionic.scss
index 23d7705b660..94790a0ba67 100644
--- a/core/src/components/select-modal/select-modal.ionic.scss
+++ b/core/src/components/select-modal/select-modal.ionic.scss
@@ -66,11 +66,11 @@ ion-content {
    * padding of the modal sheet in the core.
    */
   /* stylelint-disable-next-line declaration-no-important */
-  --padding-start: #{globals.$ion-space-400} !important;
+  --ion-content-padding-start: #{globals.$ion-space-400} !important;
   /* stylelint-disable-next-line declaration-no-important */
-  --padding-end: #{globals.$ion-space-400} !important;
+  --ion-content-padding-end: #{globals.$ion-space-400} !important;
   /* stylelint-disable-next-line declaration-no-important */
-  --padding-bottom: #{globals.$ion-space-1200} !important;
+  --ion-content-padding-bottom: #{globals.$ion-space-1200} !important;
 
   // Set the background to the focused element within a radio group only when there is a checked radio
   &:has(.radio-checked) .ion-focused:not(.item-radio-checked) {
diff --git a/core/src/components/tab-bar/test/basic/index.html b/core/src/components/tab-bar/test/basic/index.html
index 22daa86da4d..1f321ba6881 100644
--- a/core/src/components/tab-bar/test/basic/index.html
+++ b/core/src/components/tab-bar/test/basic/index.html
@@ -7,6 +7,21 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: '#f6f6f6',
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
@@ -247,10 +262,6 @@
     </ion-app>
 
     <style>
-      ion-content {
-        --background: #f6f6f6;
-      }
-
       ion-tab-bar {
         margin-bottom: 10px;
       }
diff --git a/core/src/components/tab-bar/test/expand/index.html b/core/src/components/tab-bar/test/expand/index.html
index af18c3b168a..a4b4ec7b9d6 100644
--- a/core/src/components/tab-bar/test/expand/index.html
+++ b/core/src/components/tab-bar/test/expand/index.html
@@ -7,6 +7,21 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: '#f6f6f6',
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
@@ -72,11 +87,5 @@ <h2>Compact</h2>
         </ion-tab-bar>
       </ion-content>
     </ion-app>
-
-    <style>
-      ion-content {
-        --background: #f6f6f6;
-      }
-    </style>
   </body>
 </html>
diff --git a/core/src/components/tab-bar/test/shape/index.html b/core/src/components/tab-bar/test/shape/index.html
index 8bf2e5db15a..d7366d36fed 100644
--- a/core/src/components/tab-bar/test/shape/index.html
+++ b/core/src/components/tab-bar/test/shape/index.html
@@ -7,6 +7,21 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: '#f6f6f6',
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
@@ -92,10 +107,6 @@ <h2>Rectangular</h2>
     </ion-app>
 
     <style>
-      ion-content {
-        --background: #f6f6f6;
-      }
-
       .ionic ion-tab-bar {
         position: static;
       }
diff --git a/core/src/components/tab-bar/test/translucent/index.html b/core/src/components/tab-bar/test/translucent/index.html
index 19c973aa2ea..ba98783d85c 100644
--- a/core/src/components/tab-bar/test/translucent/index.html
+++ b/core/src/components/tab-bar/test/translucent/index.html
@@ -7,6 +7,21 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: 'linear-gradient(to right, orange, yellow, green, cyan, blue, violet)',
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
@@ -191,10 +206,6 @@
     <!-- Default -->
 
     <style>
-      ion-content {
-        --background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
-      }
-
       ion-tab-bar {
         margin-bottom: 5px;
       }
diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts
index 8287b9bfd4d..16079abd86d 100644
--- a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts
+++ b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts
@@ -44,7 +44,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
         `
         <style>
           ion-content {
-            --background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
+            --ion-content-background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
           }
         </style>
         <ion-tabs>
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 272b21f3077..b119c94f1a7 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -17,7 +17,7 @@ import {
 import type { NotchController } from '@utils/forms';
 import { createNotchController, checkInvalidState } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers';
+import { inheritAriaAttributes, debounceEvent, inheritAttributes, waitForComponent } from '@utils/helpers';
 import { createSlotMutationController } from '@utils/slot-mutation-controller';
 import type { SlotMutationController } from '@utils/slot-mutation-controller';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -452,7 +452,7 @@ export class Textarea implements ComponentInterface {
      * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
      */
     if (!this.nativeInput) {
-      await new Promise((resolve) => componentOnReady(this.el, resolve));
+      await waitForComponent(this.el);
     }
     return Promise.resolve(this.nativeInput!);
   }
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index b80d307d56e..ba8923075fb 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -247,8 +247,8 @@ ion-card-header.ion-color .ion-inherit-color {
  * The code below accounts for both ion-content and then custom
  * scroll containers within ion-content (such as virtual scroll)
  */
-.menu-content-open ion-content {
-  --overflow: hidden;
+.menu-content-open ion-content::part(scroll) {
+  overflow: hidden;
 }
 
 .menu-content-open .ion-content-scroll-host {
diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss
index f42a9b0ff1e..3c81a167718 100644
--- a/core/src/css/ionic/core.ionic.scss
+++ b/core/src/css/ionic/core.ionic.scss
@@ -65,9 +65,9 @@ html.ionic .modal-footer-moving ion-toolbar {
 * within a modal.
 */
 html.ionic ion-modal.modal-sheet ion-content {
-  --padding-start: #{globals.$ion-space-400};
-  --padding-end: #{globals.$ion-space-400};
-  --padding-bottom: #{globals.$ion-space-400};
+  --ion-content-padding-start: #{globals.$ion-space-400};
+  --ion-content-padding-end: #{globals.$ion-space-400};
+  --ion-content-padding-bottom: #{globals.$ion-space-400};
 }
 
 /**
@@ -254,8 +254,8 @@ ion-card-header.ion-color .ion-inherit-color {
  * The code below accounts for both ion-content and then custom
  * scroll containers within ion-content (such as virtual scroll)
  */
-.menu-content-open ion-content {
-  --overflow: hidden;
+.menu-content-open ion-content::part(scroll) {
+  overflow: hidden;
 }
 
 .menu-content-open .ion-content-scroll-host {
diff --git a/core/src/global/config.ts b/core/src/global/config.ts
index d9795de6495..9cb262a4bea 100644
--- a/core/src/global/config.ts
+++ b/core/src/global/config.ts
@@ -2,6 +2,8 @@ import type { IonicConfig } from '../themes/themes.interfaces';
 
 // TODO(FW-2832): types
 
+type ObjectConfigValue = string | boolean;
+
 export class Config {
   private m = new Map<keyof IonicConfig, any>();
 
@@ -21,7 +23,7 @@ export class Config {
    * @param fallback Default value if the key is not found
    * @returns The value found at the nested key or the fallback
    */
-  getObjectValue(key: string, fallback?: string): string | undefined {
+  getObjectValue(key: string, fallback?: ObjectConfigValue): ObjectConfigValue | undefined {
     const [firstKey, ...remainingKeys] = key.split('.');
 
     let root: any;
diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
index 158b8ad1c19..8e303941aee 100644
--- a/core/src/interface.d.ts
+++ b/core/src/interface.d.ts
@@ -7,7 +7,7 @@ export { AccordionGroupCustomEvent } from './components/accordion-group/accordio
 export { AlertOptions } from './components/alert/alert-interface';
 export { ActionSheetOptions } from './components/action-sheet/action-sheet-interface';
 export { BreadcrumbCustomEvent } from './components/breadcrumb/breadcrumb-interface';
-export { ScrollBaseCustomEvent, ScrollCallback, ScrollCustomEvent } from './components/content/content-interface';
+export { ScrollBaseCustomEvent, ScrollCallback, ScrollCustomEvent } from './components/content/content.interfaces';
 export { CheckboxCustomEvent } from './components/checkbox/checkbox-interface';
 export { DatetimeCustomEvent, DatetimeHighlightStyle } from './components/datetime/datetime-interface';
 export { InfiniteScrollCustomEvent } from './components/infinite-scroll/infinite-scroll-interface';
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index bde15b539a0..56a9b4c08bb 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -461,6 +461,24 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonContent: {
+      background: baseColors.backgroundColor,
+      color: baseColors.textColor,
+
+      font: {
+        family: 'var(--ion-font-family, inherit)',
+      },
+
+      overflow: 'auto',
+
+      padding: {
+        bottom: 'var(--ion-spacing-0)',
+        end: 'var(--ion-spacing-0)',
+        start: 'var(--ion-spacing-0)',
+        top: 'var(--ion-spacing-0)',
+      },
+    },
+
     IonItemDivider: {
       background: baseColors.backgroundColor,
       color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index 00f09285cec..2bd1eb4f695 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -599,6 +599,24 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonContent: {
+      background: baseColors.backgroundColor,
+      color: baseColors.textColor,
+
+      font: {
+        family: 'var(--ion-font-family, inherit)',
+      },
+
+      overflow: 'auto',
+
+      padding: {
+        bottom: 'var(--ion-spacing-0)',
+        end: 'var(--ion-spacing-0)',
+        start: 'var(--ion-spacing-0)',
+        top: 'var(--ion-spacing-0)',
+      },
+    },
+
     IonItemDivider: {
       background: `var(--ion-background-color-step-100, ${mix(baseColors.black, baseColors.white, '90%')})`,
       color: `var(--ion-text-color-step-150, ${mix(baseColors.white, baseColors.black, '85%')})`,
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index 48cbb301023..3a909ef16bd 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -602,6 +602,24 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonContent: {
+      background: baseColors.backgroundColor,
+      color: baseColors.textColor,
+
+      font: {
+        family: 'var(--ion-font-family, inherit)',
+      },
+
+      overflow: 'auto',
+
+      padding: {
+        bottom: 'var(--ion-spacing-0)',
+        end: 'var(--ion-spacing-0)',
+        start: 'var(--ion-spacing-0)',
+        top: 'var(--ion-spacing-0)',
+      },
+    },
+
     IonItemDivider: {
       background: baseColors.backgroundColor,
       color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts
index 4d552c77be7..0a87addcbff 100644
--- a/core/src/themes/themes.interfaces.ts
+++ b/core/src/themes/themes.interfaces.ts
@@ -1,5 +1,6 @@
 import type { IonBadgeConfig, IonBadgeRecipe } from '../components/badge/badge.interfaces';
 import type { IonChipConfig, IonChipRecipe } from '../components/chip/chip.interfaces';
+import type { IonContentRecipe } from '../components/content/content.interfaces';
 import type { IonItemDividerRecipe } from '../components/item-divider/item-divider.interfaces';
 import type { IonProgressBarConfig, IonProgressBarRecipe } from '../components/progress-bar/progress-bar.interfaces';
 import type { IonSpinnerConfig, IonSpinnerRecipe } from '../components/spinner/spinner.interfaces';
@@ -287,6 +288,7 @@ type Components = {
   IonAvatar?: any;
   IonBadge?: IonBadgeRecipe;
   IonChip?: IonChipRecipe;
+  IonContent?: IonContentRecipe;
   IonItemDivider?: IonItemDividerRecipe;
   IonProgressBar?: IonProgressBarRecipe;
   IonSpinner?: IonSpinnerRecipe;
diff --git a/core/src/utils/content/index.ts b/core/src/utils/content/index.ts
index 44a6f7bff13..0a73a672b5a 100644
--- a/core/src/utils/content/index.ts
+++ b/core/src/utils/content/index.ts
@@ -1,4 +1,4 @@
-import { componentOnReady } from '../helpers';
+import { waitForComponent } from '../helpers';
 import { printRequiredElementError } from '../logging';
 
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';
@@ -27,7 +27,7 @@ export const isIonContent = (el: Element) => el.tagName === ION_CONTENT_TAG_NAME
  */
 export const getScrollElement = async (el: Element) => {
   if (isIonContent(el)) {
-    await new Promise((resolve) => componentOnReady(el, resolve));
+    await waitForComponent(el);
     return (el as HTMLIonContentElement).getScrollElement();
   }
 
diff --git a/core/src/utils/framework-delegate.ts b/core/src/utils/framework-delegate.ts
index 37616c037ac..ad858d2e636 100644
--- a/core/src/utils/framework-delegate.ts
+++ b/core/src/utils/framework-delegate.ts
@@ -1,7 +1,7 @@
 import { config } from '../global/config';
 import type { ComponentRef, FrameworkDelegate } from '../interface';
 
-import { componentOnReady } from './helpers';
+import { waitForComponent } from './helpers';
 
 // TODO(FW-2832): types
 
@@ -31,7 +31,7 @@ export const attachComponent = async (
 
   container.appendChild(el);
 
-  await new Promise((resolve) => componentOnReady(el, resolve));
+  await waitForComponent(el);
 
   return el;
 };
@@ -91,7 +91,7 @@ export const CoreDelegate = () => {
 
       ChildComponent = el;
 
-      await new Promise((resolve) => componentOnReady(el, resolve));
+      await waitForComponent(el);
     } else if (
       BaseComponent.children.length > 0 &&
       (BaseComponent.tagName === 'ION-MODAL' || BaseComponent.tagName === 'ION-POPOVER')
diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index 17a563b601e..d3a3d327d05 100644
--- a/core/src/utils/helpers.ts
+++ b/core/src/utils/helpers.ts
@@ -83,6 +83,15 @@ export const componentOnReady = (el: any, callback: any) => {
   }
 };
 
+/**
+ * Promise-based wrapper around componentOnReady. Use when you need to await
+ * component readiness before accessing internal refs (e.g. in early lifecycle
+ * hooks like Vue onMounted with the custom elements build).
+ */
+export const waitForComponent = <T extends Element>(el: T): Promise<T> => {
+  return new Promise<T>((resolve) => componentOnReady(el, () => resolve(el)));
+};
+
 /**
  * This functions checks if a Stencil component is using
  * the lazy loaded build of Stencil. Returns `true` if
diff --git a/core/src/utils/input-shims/hacks/scroll-padding.ts b/core/src/utils/input-shims/hacks/scroll-padding.ts
index 8dc266972f2..8216d0f6cbe 100644
--- a/core/src/utils/input-shims/hacks/scroll-padding.ts
+++ b/core/src/utils/input-shims/hacks/scroll-padding.ts
@@ -26,10 +26,10 @@ export const setScrollPadding = (contentEl: HTMLElement, paddingAmount: number,
   }
 
   if (paddingAmount > 0) {
-    contentEl.style.setProperty('--keyboard-offset', `${paddingAmount}px`);
+    contentEl.style.setProperty('--internal-keyboard-offset', `${paddingAmount}px`);
   } else {
     (contentEl as any)[PADDING_TIMER_KEY] = setTimeout(() => {
-      contentEl.style.setProperty('--keyboard-offset', '0px');
+      contentEl.style.setProperty('--internal-keyboard-offset', '0px');
       if (clearCallback) {
         clearCallback();
       }
diff --git a/core/src/utils/input-shims/hacks/test/scroll-assist.e2e.ts b/core/src/utils/input-shims/hacks/test/scroll-assist.e2e.ts
index 9edfc45e7d2..2a45d285c92 100644
--- a/core/src/utils/input-shims/hacks/test/scroll-assist.e2e.ts
+++ b/core/src/utils/input-shims/hacks/test/scroll-assist.e2e.ts
@@ -167,7 +167,7 @@ class ScrollAssistFixture {
 
     await this.focusInput(interactiveSelector, inputSelector);
 
-    await expect(content).not.toHaveCSS('--keyboard-offset', '0px');
+    await expect(content).not.toHaveCSS('--internal-keyboard-offset', '0px');
   }
 
   async expectNotToHaveScrollPadding(interactiveSelector: string, inputSelector: string) {
@@ -175,6 +175,6 @@ class ScrollAssistFixture {
 
     await this.focusInput(interactiveSelector, inputSelector);
 
-    await expect(content).toHaveCSS('--keyboard-offset', '0px');
+    await expect(content).toHaveCSS('--internal-keyboard-offset', '0px');
   }
 }
diff --git a/core/src/utils/input-shims/input-shims.ts b/core/src/utils/input-shims/input-shims.ts
index 879fbfff870..9f7879790af 100644
--- a/core/src/utils/input-shims/input-shims.ts
+++ b/core/src/utils/input-shims/input-shims.ts
@@ -2,7 +2,7 @@ import { doc } from '@utils/browser';
 
 import type { Config } from '../../interface';
 import { findClosestIonContent } from '../content';
-import { componentOnReady } from '../helpers';
+import { waitForComponent } from '../helpers';
 import { Keyboard } from '../native/keyboard';
 
 import { enableHideCaretOnScroll } from './hacks/hide-caret';
@@ -59,7 +59,7 @@ export const startInputShims = async (config: Config, platform: 'ios' | 'android
   const keyboardResizeMode = await Keyboard.getResizeMode();
 
   const registerInput = async (componentEl: HTMLElement) => {
-    await new Promise((resolve) => componentOnReady(componentEl, resolve));
+    await waitForComponent(componentEl);
 
     const inputRoot = componentEl.shadowRoot || componentEl;
     const inputEl = inputRoot.querySelector('input') || inputRoot.querySelector('textarea');
diff --git a/core/src/utils/menu-controller/index.ts b/core/src/utils/menu-controller/index.ts
index dca6c5bc8ce..bdb72963f41 100644
--- a/core/src/utils/menu-controller/index.ts
+++ b/core/src/utils/menu-controller/index.ts
@@ -5,7 +5,7 @@ import { printIonWarning } from '@utils/logging';
 
 import type { MenuI, MenuControllerI } from '../../components/menu/menu-interface';
 import type { AnimationBuilder } from '../../interface';
-import { componentOnReady } from '../helpers';
+import { waitForComponent } from '../helpers';
 
 import { menuOverlayAnimation } from './animations/overlay';
 import { menuPushAnimation } from './animations/push';
@@ -218,11 +218,7 @@ const createMenuController = (): MenuControllerI => {
   };
 
   const waitUntilReady = () => {
-    return Promise.all(
-      Array.from(document.querySelectorAll('ion-menu')).map(
-        (menu) => new Promise((resolve) => componentOnReady(menu, resolve))
-      )
-    );
+    return Promise.all(Array.from(document.querySelectorAll('ion-menu')).map((menu) => waitForComponent(menu)));
   };
 
   registerAnimation('reveal', menuRevealAnimation);
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 1271a999285..25485bf0ea7 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -27,10 +27,10 @@ import { BACKDROP_NO_SCROLL } from './gesture/gesture-controller';
 import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button';
 import {
   addEventListener,
-  componentOnReady,
   focusVisibleElement,
   getElementRoot,
   removeEventListener,
+  waitForComponent,
 } from './helpers';
 
 let lastOverlayIndex = 0;
@@ -126,7 +126,7 @@ export const createOverlay = <T extends HTMLIonOverlayElement>(
   // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
   if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
     return window.customElements.whenDefined(tagName).then(() => {
-      const element = document.createElement(tagName) as HTMLIonOverlayElement;
+      const element = document.createElement(tagName) as T;
       element.classList.add('overlay-hidden');
 
       /**
@@ -138,7 +138,7 @@ export const createOverlay = <T extends HTMLIonOverlayElement>(
       // append the overlay element to the document body
       getAppRoot(document).appendChild(element);
 
-      return new Promise((resolve) => componentOnReady(element, resolve));
+      return waitForComponent(element);
     });
   }
   return Promise.resolve() as any;
diff --git a/core/src/utils/status-tap.ts b/core/src/utils/status-tap.ts
index 6f267fcaa59..d5ae5efaccb 100644
--- a/core/src/utils/status-tap.ts
+++ b/core/src/utils/status-tap.ts
@@ -1,7 +1,7 @@
 import { readTask, writeTask } from '@stencil/core';
 
 import { findClosestIonContent, scrollToTop } from './content';
-import { componentOnReady } from './helpers';
+import { waitForComponent } from './helpers';
 
 export const startStatusTap = () => {
   const win = window;
@@ -15,7 +15,7 @@ export const startStatusTap = () => {
       }
       const contentEl = findClosestIonContent(el);
       if (contentEl) {
-        new Promise((resolve) => componentOnReady(contentEl, resolve)).then(() => {
+        waitForComponent(contentEl).then(() => {
           writeTask(async () => {
             /**
              * If scrolling and user taps status bar,
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 209bb68e4a9..4268794797b 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -594,7 +594,7 @@ export declare interface IonCol extends Components.IonCol {}
 
 
 @ProxyCmp({
-  inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'],
+  inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY'],
   methods: ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']
 })
 @Component({
@@ -602,7 +602,7 @@ export declare interface IonCol extends Components.IonCol {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'],
+  inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY'],
 })
 export class IonContent {
   protected el: HTMLIonContentElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index ecff6aba767..2bd93c24163 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -666,7 +666,7 @@ export declare interface IonCol extends Components.IonCol {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonContent,
-  inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'],
+  inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY'],
   methods: ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']
 })
 @Component({
@@ -674,7 +674,7 @@ export declare interface IonCol extends Components.IonCol {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'],
+  inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY'],
   standalone: true
 })
 export class IonContent {