From b11c630410d02253245eed09b2058710c498cbcb Mon Sep 17 00:00:00 2001
From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Date: Tue, 2 Apr 2024 22:26:14 -0400
Subject: [PATCH] fix(core): fallback detection for themes and modes (#29224)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

With the latest changes on `next`, the fallback behavior for detecting
the themes from the Ionic config does not work when using
`ion-router-outlet`.

For example, in a React app with:

```ts
setupIonicReact({
  theme: 'ios'
});
```

and a template of:
```tsx
<IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
         /* All children will apply the default mode for the mode and theme - not expected */
     </IonRouterOutlet>
  </IonReactRouter>
</IonApp>
```

All components rendered inside the `IonRouterOutlet` will apply the
`mode` detection for the `theme`. This is not expected behavior, since
the configuration has specified the `ionic` theme is the default theme.

This problem occurs due to this specific logic:
```ts
const elmMode = (elm as any).mode || elm.getAttribute('mode');
```

The `ion-router-outlet` component has a property defined on the class
for `mode`:
https://github.com/ionic-team/ionic-framework/blob/ca0923812a89fab830c33b1e854d114c2946c988/core/src/components/router-outlet/router-outlet.tsx#L42

This means that `defaultMode` will always apply over the Ionic config's
theme (`defaultTheme`).

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Specifying the `ionic` theme from the `initialize`/`setupIonicReact`
functions will persist to children components.
- Developers can still use the `mode` to persist the changes to child
nodes. However for in the case of `IonRouterOutlet`, it will require
actually specifying the attribute in the mark-up:
```tsx
<IonRouterOutlet mode="md">
  /* Any children will apply the "md" mode and theme */
</IonRouterOutlet>
```

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---
 core/src/global/ionic-global.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/global/ionic-global.ts b/core/src/global/ionic-global.ts
index 371852ea70..ee2ff31ddc 100644
--- a/core/src/global/ionic-global.ts
+++ b/core/src/global/ionic-global.ts
@@ -227,7 +227,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
      * behavior for applications that are not setting the "theme".
      */
     while (elm) {
-      const theme = (elm as any).theme || elm.getAttribute('theme');
+      const theme = elm.getAttribute('theme');
 
       if (theme) {
         if (isThemeSupported(theme)) {
@@ -241,7 +241,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
        * If a theme is not detected, then fallback to using the
        * `mode` attribute to determine the style sheets to use.
        */
-      const elmMode = (elm as any).mode || elm.getAttribute('mode');
+      const elmMode = elm.getAttribute('mode');
 
       if (elmMode) {
         if (isModeSupported(elmMode)) {