From 9d00d73ea6ffedcbdbb41d81efff503ee21d52a4 Mon Sep 17 00:00:00 2001
From: joesphchang <joesphschang@gmail.com>
Date: Fri, 6 Jun 2025 16:28:07 -0500
Subject: [PATCH] docs(config): added ionic-mode docs to Reading the Config"

---
 docs/developing/config.md | 179 +++++++++++++++++++++++++++++++-------
 1 file changed, 149 insertions(+), 30 deletions(-)

diff --git a/docs/developing/config.md b/docs/developing/config.md
index 0f70b8da46d..cb8d4306430 100644
--- a/docs/developing/config.md
+++ b/docs/developing/config.md
@@ -51,9 +51,10 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo
 
 <PerPlatformOverridesExample />
 
-## Reading the Config (Angular)
+## Reading the Config
 
-Ionic Angular provides a `Config` provider for accessing the Ionic Config.
+### Acccessing the Current Mode Programmatically
+In some cases, you may need to access the current Ionic mode programmatically within your application logic. This can be useful for applying conditional behavior, fetching specific assets, or performing other actions based on the active styling mode.
 
 ### get
 
@@ -68,38 +69,93 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config.
   groupId="framework"
   defaultValue="angular"
   values={[
+    { value: 'javascript', label: 'JavaScript' },
     { value: 'angular', label: 'Angular' },
     { value: 'angular-standalone', label: 'Angular (Standalone)' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
   ]}
 >
-<TabItem value="angular">
-
-```ts
-import { Config } from '@ionic/angular';
-
-@Component(...)
-class AppComponent {
-  constructor(config: Config) {
-    const mode = config.get('mode');
-  }
-}
-```
-
-</TabItem>
-<TabItem value="angular-standalone">
-
-```ts
-import { Config } from '@ionic/angular/standalone';
-
-@Component(...)
-class AppComponent {
-  constructor(config: Config) {
-    const mode = config.get('mode');
-  }
-}
-```
-
-</TabItem>
+  <TabItem value="javascript">
+    ```javascript
+    const mode = Ionic.mode;
+    console.log('Current Ionic Mode: ', mode); // e.g., 'ios' or 'md'
+    ```
+  </TabItem>
+
+  <TabItem value="angular">
+    ```ts
+    import { Config } from '@ionic/angular';
+
+    @Component(...)
+    class AppComponent {
+      constructor(config: Config) {
+        const mode = config.get('mode');
+      }
+    }
+    ```
+  </TabItem>
+
+  <TabItem value="angular-standalone">
+    ```ts
+    import { Config } from '@ionic/angular/standalone';
+
+    @Component(...)
+    class AppComponent {
+      constructor(config: Config) {
+        const mode = config.get('mode');
+      }
+    }
+    ```
+  </TabItem>
+
+
+  <TabItem value="react">
+    ```jsx
+    import React from 'react';
+    import { IonButton, IonContent, IonPage } from '@ionic/react';
+    import { getMode } from '@ionic/core';
+
+    function ModeDisplayExample() {
+      const mode = getMode();
+
+      return (
+        <IonPage>
+          <IonContent className="ion-padding">
+            <p>The current Ionic mode is: <strong>{mode}</strong></p>
+            <IonButton color={mode === 'ios' ? 'secondary' : 'tertiary'}>
+              Mode-Dependent Button
+            </IonButton>
+          </IonContent>
+        </IonPage>
+      );
+    }
+
+    export default ModeDisplayExample;
+    ```
+  </TabItem>
+
+  <TabItem value="vue">
+    ```javascript
+    <template>
+      <ion-page>
+        <ion-content class="ion-padding">
+          <p>The current Ionic mode is: <strong>{{ mode }}</strong></p>
+          <ion-button :color="mode === 'ios' ? 'secondary' : 'tertiary'">
+            Mode-Dependent Button
+          </ion-button>
+        </ion-content>
+      </ion-page>
+    </template>
+
+    <script setup lang="ts">
+      import { IonButton, IonContent, IonPage } from '@ionic/vue';
+      import { getMode } from '@ionic/core';
+
+      const mode = getMode();
+    </script>
+    ```
+  </TabItem>
 </Tabs>
 
 ### getBoolean
@@ -115,10 +171,24 @@ class AppComponent {
   groupId="framework"
   defaultValue="angular"
   values={[
+    { value: 'javascript', label: 'JavaScript' },
     { value: 'angular', label: 'Angular' },
     { value: 'angular-standalone', label: 'Angular (Standalone)' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
   ]}
 >
+
+<TabItem value="javascript">
+
+  ```js
+    import { config } from '@ionic/core';
+
+    const swipeBackEnabled = config.getBoolean('swipeBackEnabled');
+
+    console.log('Swipe back enabled:', swipeBackEnabled);
+  ```
+</TabItem>
 <TabItem value="angular">
 
 ```ts
@@ -146,6 +216,55 @@ class AppComponent {
 }
 ```
 
+</TabItem>
+<TabItem value="react">
+
+  ```jsx
+    import React from 'react';
+    import { IonButton, IonContent, IonPage } from '@ionic/react';
+    import { config } from '@ionic/core';
+
+    function SwipeBackExample() {
+      const swipeBackEnabled = config.getBoolean('swipeBackEnabled');
+
+      return (
+        <IonPage>
+          <IonContent className="ion-padding">
+            <p>Swipe back is <strong>{swipeBackEnabled ? 'enabled' : 'disabled'}</strong>.</p>
+            <IonButton disabled={!swipeBackEnabled}>
+              Try Swipe Back
+            </IonButton>
+          </IonContent>
+        </IonPage>
+      );
+    }
+
+    export default SwipeBackExample;
+  ```
+
+</TabItem>
+<TabItem value="vue">
+
+  ```javascript
+  <template>
+    <ion-page>
+      <ion-content class="ion-padding">
+        <p>Swipe back is <strong>{{ swipeBackEnabled ? 'enabled' : 'disabled' }}</strong>.</p>
+        <ion-button :disabled="!swipeBackEnabled">
+          Try Swipe Back
+        </ion-button>
+      </ion-content>
+    </ion-page>
+  </template>
+
+  <script setup lang="ts">
+  import { IonButton, IonContent, IonPage } from '@ionic/vue';
+  import { config } from '@ionic/core';
+
+  const swipeBackEnabled = config.getBoolean('swipeBackEnabled');
+  </script>
+  ```
+
 </TabItem>
 </Tabs>