From 4342d926a8256a95130a3b24393ea96cdb1a8284 Mon Sep 17 00:00:00 2001
From: joesphchang <joesphschang@gmail.com>
Date: Tue, 1 Jul 2025 13:00:33 -0500
Subject: [PATCH 1/4] docs(config): added the new files to usage-v8

---
 docs/developing/config.md                                     | 2 ++
 static/usage/v8/config/mode/angular/example_component_html.md | 0
 static/usage/v8/config/mode/angular/example_component_ts.md   | 0
 static/usage/v8/config/mode/demo.html                         | 0
 static/usage/v8/config/mode/index.md                          | 0
 static/usage/v8/config/mode/javascript.md                     | 0
 static/usage/v8/config/mode/react.md                          | 0
 static/usage/v8/config/mode/vue.md                            | 0
 8 files changed, 2 insertions(+)
 create mode 100644 static/usage/v8/config/mode/angular/example_component_html.md
 create mode 100644 static/usage/v8/config/mode/angular/example_component_ts.md
 create mode 100644 static/usage/v8/config/mode/demo.html
 create mode 100644 static/usage/v8/config/mode/index.md
 create mode 100644 static/usage/v8/config/mode/javascript.md
 create mode 100644 static/usage/v8/config/mode/react.md
 create mode 100644 static/usage/v8/config/mode/vue.md

diff --git a/docs/developing/config.md b/docs/developing/config.md
index 0f70b8da46d..7073a1f6110 100644
--- a/docs/developing/config.md
+++ b/docs/developing/config.md
@@ -51,6 +51,8 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo
 
 <PerPlatformOverridesExample />
 
+
+
 ## Reading the Config (Angular)
 
 Ionic Angular provides a `Config` provider for accessing the Ionic Config.
diff --git a/static/usage/v8/config/mode/angular/example_component_html.md b/static/usage/v8/config/mode/angular/example_component_html.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/usage/v8/config/mode/angular/example_component_ts.md b/static/usage/v8/config/mode/angular/example_component_ts.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/usage/v8/config/mode/index.md b/static/usage/v8/config/mode/index.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/usage/v8/config/mode/react.md b/static/usage/v8/config/mode/react.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/usage/v8/config/mode/vue.md b/static/usage/v8/config/mode/vue.md
new file mode 100644
index 00000000000..e69de29bb2d

From f3e8fb9fb7214cdeeb861bc8f34bcd2c8532573d Mon Sep 17 00:00:00 2001
From: joesphchang <joesphschang@gmail.com>
Date: Tue, 1 Jul 2025 21:02:25 -0500
Subject: [PATCH 2/4] docs(config): v8 is up to date and working

---
 docs/developing/config.md                     |  6 ++
 .../mode/angular/example_component_html.md    | 30 +++++++++
 .../mode/angular/example_component_ts.md      | 22 +++++++
 static/usage/v8/config/mode/demo.html         | 65 +++++++++++++++++++
 static/usage/v8/config/mode/index.md          | 24 +++++++
 static/usage/v8/config/mode/javascript.md     | 45 +++++++++++++
 static/usage/v8/config/mode/react.md          | 32 +++++++++
 static/usage/v8/config/mode/vue.md            | 46 +++++++++++++
 8 files changed, 270 insertions(+)

diff --git a/docs/developing/config.md b/docs/developing/config.md
index 7073a1f6110..6cce3de4a1d 100644
--- a/docs/developing/config.md
+++ b/docs/developing/config.md
@@ -51,7 +51,13 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo
 
 <PerPlatformOverridesExample />
 
+## Accessing the Mode
 
+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.
+
+import IonicMode from '@site/static/usage/v8/config/mode/index.md';
+
+<IonicMode />
 
 ## Reading the Config (Angular)
 
diff --git a/static/usage/v8/config/mode/angular/example_component_html.md b/static/usage/v8/config/mode/angular/example_component_html.md
index e69de29bb2d..3c9e0eb1eb4 100644
--- a/static/usage/v8/config/mode/angular/example_component_html.md
+++ b/static/usage/v8/config/mode/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+<ion-app>
+  <ion-content>
+    <div class="container">
+      <ion-button
+        [color]="modeValue === 'ios' ? 'secondary' : 'tertiary'"
+        [fill]="modeValue === 'ios' ? 'outline' : 'solid'"
+        (click)="showMode()"
+      >
+        {{ modeValue }}
+      </ion-button>
+      <div class="mode-value" *ngIf="modeValue">
+        Current mode: {{ modeValue }}
+      </div>
+    </div>
+  </ion-content>
+</ion-app>
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .mode-value {
+    margin-top: 16px;
+    font-weight: bold;
+  }
+</style>
+```
\ No newline at end of file
diff --git a/static/usage/v8/config/mode/angular/example_component_ts.md b/static/usage/v8/config/mode/angular/example_component_ts.md
index e69de29bb2d..daac2651690 100644
--- a/static/usage/v8/config/mode/angular/example_component_ts.md
+++ b/static/usage/v8/config/mode/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { Config, IonicModule } from '@ionic/angular';
+import { NgIf } from '@angular/common';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './example.component.html',
+  imports: [IonicModule, NgIf], 
+  standalone: true
+})
+export class ExampleComponent {
+  modeValue = '';
+
+  constructor(public config: Config) {
+    this.modeValue = this.config.get('mode');
+  }
+  showMode() {
+    this.modeValue = this.config.get('mode');
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html
index e69de29bb2d..752587281f8 100644
--- a/static/usage/v8/config/mode/demo.html
+++ b/static/usage/v8/config/mode/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ionic Config Mode</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+    <style>
+        .mode-value {
+            margin-top: 16px;
+            font-weight: bold;
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center; 
+            gap: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <ion-app>
+        <ion-content>
+            <div class="container">
+                <ion-button id="showModeBtn" color="primary" fill="solid">Show Current Mode</ion-button>
+                <div class="mode-value" id="modeValue"></div>
+            </div>
+        </ion-content>
+    </ion-app>
+    <script type="module">
+        function getMode() {
+            if (window.Ionic && window.Ionic.config && window.Ionic.config.get) {
+                return window.Ionic.config.get('mode');
+            } else {
+                return document.documentElement.getAttribute('mode') || 'md';
+            }
+        }
+
+        function updateButton(mode) {
+            const btn = document.getElementById('showModeBtn');
+            btn.innerText = mode;
+            btn.color = mode === 'ios' ? 'secondary' : 'tertiary';
+            btn.fill = mode === 'ios' ? 'outline' : 'solid';
+        }
+
+        document.getElementById('showModeBtn').addEventListener('click', () => {
+            const mode = getMode();
+            document.getElementById('modeValue').textContent = `Current mode: ${mode}`;
+            updateButton(mode);
+        });
+
+        // Optionally, set initial state on load
+        document.addEventListener('DOMContentLoaded', () => {
+            const mode = getMode();
+            updateButton(mode);
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v8/config/mode/index.md b/static/usage/v8/config/mode/index.md
index e69de29bb2d..f644f1be806 100644
--- a/static/usage/v8/config/mode/index.md
+++ b/static/usage/v8/config/mode/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/config/mode/demo.html"
+/>
\ No newline at end of file
diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md
index e69de29bb2d..74c92fedfd9 100644
--- a/static/usage/v8/config/mode/javascript.md
+++ b/static/usage/v8/config/mode/javascript.md
@@ -0,0 +1,45 @@
+```html
+<div class="container">
+  <ion-button id="showModeBtn" color="primary" fill="solid">Show Current Mode</ion-button>
+  <div class="mode-value" id="modeValue"></div>
+</div>
+<script>
+  function getMode() {
+    if (window.Ionic && window.Ionic.config && window.Ionic.config.get) {
+      return window.Ionic.config.get('mode');
+    } else {
+      return document.documentElement.getAttribute('mode') || 'md';
+    }
+  }
+
+  function updateButton(mode) {
+    const btn = document.getElementById('showModeBtn');
+    btn.innerText = mode;
+    btn.color = mode === 'ios' ? 'secondary' : 'tertiary';
+    btn.fill = mode === 'ios' ? 'outline' : 'solid';
+  }
+
+  document.getElementById('showModeBtn').addEventListener('click', () => {
+    const mode = getMode();
+    document.getElementById('modeValue').textContent = `Current mode: ${mode}`;
+    updateButton(mode);
+  });
+
+  // Optionally, set initial state on load
+  document.addEventListener('DOMContentLoaded', () => {
+    const mode = getMode();
+    updateButton(mode);
+  });
+</script>
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .mode-value {
+    margin-top: 16px;
+    font-weight: bold;
+  }
+</style>
+```
\ No newline at end of file
diff --git a/static/usage/v8/config/mode/react.md b/static/usage/v8/config/mode/react.md
index e69de29bb2d..4b54b72f004 100644
--- a/static/usage/v8/config/mode/react.md
+++ b/static/usage/v8/config/mode/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import { IonButton } from '@ionic/react';
+import { getMode } from '@ionic/core';
+
+function Example() {
+  const [modeValue, setModeValue] = useState('');
+
+  useEffect(() => {
+    setModeValue(getMode());
+  }, []);
+
+  const showMode = () => {
+    setModeValue(getMode());
+  };
+
+  const color = modeValue === 'ios' ? 'secondary' : 'tertiary';
+  const fill = modeValue === 'ios' ? 'outline' : 'solid';
+
+  return (
+    <div className="container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <IonButton color={color} fill={fill} onClick={showMode}>
+        {modeValue}
+      </IonButton>
+      <div className="mode-value" style={{ marginTop: 16, fontWeight: 'bold' }}>
+        {modeValue && `Current mode: ${modeValue}`}
+      </div>
+    </div>
+  );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v8/config/mode/vue.md b/static/usage/v8/config/mode/vue.md
index e69de29bb2d..b5ef5888182 100644
--- a/static/usage/v8/config/mode/vue.md
+++ b/static/usage/v8/config/mode/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <div class="container">
+    <ion-button
+      :color="color"
+      :fill="fill"
+      @click="showMode"
+    >
+      {{ modeValue }}
+    </ion-button>
+    <div class="mode-value" v-if="modeValue">
+      Current mode: {{ modeValue }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { getMode } from '@ionic/core';
+
+const modeValue = ref('');
+
+function showMode() {
+  modeValue.value = getMode();
+}
+
+const color = computed(() => modeValue.value === 'ios' ? 'secondary' : 'tertiary');
+const fill = computed(() => modeValue.value === 'ios' ? 'outline' : 'solid');
+
+onMounted(() => {
+  modeValue.value = getMode();
+});
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.mode-value {
+  margin-top: 16px;
+  font-weight: bold;
+}
+</style>
+```
\ No newline at end of file

From 7f225544f39fab5ab9a6fb3643987e353dac013d Mon Sep 17 00:00:00 2001
From: joesphchang <joesphschang@gmail.com>
Date: Tue, 1 Jul 2025 21:08:57 -0500
Subject: [PATCH 3/4] docs(config): added the ionic mode to config docs v7

---
 .../mode/angular/example_component_html.md    | 30 +++++++++
 .../mode/angular/example_component_ts.md      | 22 +++++++
 static/usage/v7/config/mode/demo.html         | 65 +++++++++++++++++++
 static/usage/v7/config/mode/index.md          | 24 +++++++
 static/usage/v7/config/mode/javascript.md     | 45 +++++++++++++
 static/usage/v7/config/mode/react.md          | 32 +++++++++
 static/usage/v7/config/mode/vue.md            | 46 +++++++++++++
 static/usage/v8/config/mode/index.md          |  2 +-
 .../version-v7/developing/config.md           |  8 +++
 9 files changed, 273 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/v7/config/mode/angular/example_component_html.md
 create mode 100644 static/usage/v7/config/mode/angular/example_component_ts.md
 create mode 100644 static/usage/v7/config/mode/demo.html
 create mode 100644 static/usage/v7/config/mode/index.md
 create mode 100644 static/usage/v7/config/mode/javascript.md
 create mode 100644 static/usage/v7/config/mode/react.md
 create mode 100644 static/usage/v7/config/mode/vue.md

diff --git a/static/usage/v7/config/mode/angular/example_component_html.md b/static/usage/v7/config/mode/angular/example_component_html.md
new file mode 100644
index 00000000000..3c9e0eb1eb4
--- /dev/null
+++ b/static/usage/v7/config/mode/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+<ion-app>
+  <ion-content>
+    <div class="container">
+      <ion-button
+        [color]="modeValue === 'ios' ? 'secondary' : 'tertiary'"
+        [fill]="modeValue === 'ios' ? 'outline' : 'solid'"
+        (click)="showMode()"
+      >
+        {{ modeValue }}
+      </ion-button>
+      <div class="mode-value" *ngIf="modeValue">
+        Current mode: {{ modeValue }}
+      </div>
+    </div>
+  </ion-content>
+</ion-app>
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .mode-value {
+    margin-top: 16px;
+    font-weight: bold;
+  }
+</style>
+```
\ No newline at end of file
diff --git a/static/usage/v7/config/mode/angular/example_component_ts.md b/static/usage/v7/config/mode/angular/example_component_ts.md
new file mode 100644
index 00000000000..daac2651690
--- /dev/null
+++ b/static/usage/v7/config/mode/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { Config, IonicModule } from '@ionic/angular';
+import { NgIf } from '@angular/common';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './example.component.html',
+  imports: [IonicModule, NgIf], 
+  standalone: true
+})
+export class ExampleComponent {
+  modeValue = '';
+
+  constructor(public config: Config) {
+    this.modeValue = this.config.get('mode');
+  }
+  showMode() {
+    this.modeValue = this.config.get('mode');
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/config/mode/demo.html b/static/usage/v7/config/mode/demo.html
new file mode 100644
index 00000000000..752587281f8
--- /dev/null
+++ b/static/usage/v7/config/mode/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ionic Config Mode</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+    <style>
+        .mode-value {
+            margin-top: 16px;
+            font-weight: bold;
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center; 
+            gap: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <ion-app>
+        <ion-content>
+            <div class="container">
+                <ion-button id="showModeBtn" color="primary" fill="solid">Show Current Mode</ion-button>
+                <div class="mode-value" id="modeValue"></div>
+            </div>
+        </ion-content>
+    </ion-app>
+    <script type="module">
+        function getMode() {
+            if (window.Ionic && window.Ionic.config && window.Ionic.config.get) {
+                return window.Ionic.config.get('mode');
+            } else {
+                return document.documentElement.getAttribute('mode') || 'md';
+            }
+        }
+
+        function updateButton(mode) {
+            const btn = document.getElementById('showModeBtn');
+            btn.innerText = mode;
+            btn.color = mode === 'ios' ? 'secondary' : 'tertiary';
+            btn.fill = mode === 'ios' ? 'outline' : 'solid';
+        }
+
+        document.getElementById('showModeBtn').addEventListener('click', () => {
+            const mode = getMode();
+            document.getElementById('modeValue').textContent = `Current mode: ${mode}`;
+            updateButton(mode);
+        });
+
+        // Optionally, set initial state on load
+        document.addEventListener('DOMContentLoaded', () => {
+            const mode = getMode();
+            updateButton(mode);
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/config/mode/index.md b/static/usage/v7/config/mode/index.md
new file mode 100644
index 00000000000..f644f1be806
--- /dev/null
+++ b/static/usage/v7/config/mode/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/config/mode/demo.html"
+/>
\ No newline at end of file
diff --git a/static/usage/v7/config/mode/javascript.md b/static/usage/v7/config/mode/javascript.md
new file mode 100644
index 00000000000..74c92fedfd9
--- /dev/null
+++ b/static/usage/v7/config/mode/javascript.md
@@ -0,0 +1,45 @@
+```html
+<div class="container">
+  <ion-button id="showModeBtn" color="primary" fill="solid">Show Current Mode</ion-button>
+  <div class="mode-value" id="modeValue"></div>
+</div>
+<script>
+  function getMode() {
+    if (window.Ionic && window.Ionic.config && window.Ionic.config.get) {
+      return window.Ionic.config.get('mode');
+    } else {
+      return document.documentElement.getAttribute('mode') || 'md';
+    }
+  }
+
+  function updateButton(mode) {
+    const btn = document.getElementById('showModeBtn');
+    btn.innerText = mode;
+    btn.color = mode === 'ios' ? 'secondary' : 'tertiary';
+    btn.fill = mode === 'ios' ? 'outline' : 'solid';
+  }
+
+  document.getElementById('showModeBtn').addEventListener('click', () => {
+    const mode = getMode();
+    document.getElementById('modeValue').textContent = `Current mode: ${mode}`;
+    updateButton(mode);
+  });
+
+  // Optionally, set initial state on load
+  document.addEventListener('DOMContentLoaded', () => {
+    const mode = getMode();
+    updateButton(mode);
+  });
+</script>
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .mode-value {
+    margin-top: 16px;
+    font-weight: bold;
+  }
+</style>
+```
\ No newline at end of file
diff --git a/static/usage/v7/config/mode/react.md b/static/usage/v7/config/mode/react.md
new file mode 100644
index 00000000000..4b54b72f004
--- /dev/null
+++ b/static/usage/v7/config/mode/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import { IonButton } from '@ionic/react';
+import { getMode } from '@ionic/core';
+
+function Example() {
+  const [modeValue, setModeValue] = useState('');
+
+  useEffect(() => {
+    setModeValue(getMode());
+  }, []);
+
+  const showMode = () => {
+    setModeValue(getMode());
+  };
+
+  const color = modeValue === 'ios' ? 'secondary' : 'tertiary';
+  const fill = modeValue === 'ios' ? 'outline' : 'solid';
+
+  return (
+    <div className="container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <IonButton color={color} fill={fill} onClick={showMode}>
+        {modeValue}
+      </IonButton>
+      <div className="mode-value" style={{ marginTop: 16, fontWeight: 'bold' }}>
+        {modeValue && `Current mode: ${modeValue}`}
+      </div>
+    </div>
+  );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v7/config/mode/vue.md b/static/usage/v7/config/mode/vue.md
new file mode 100644
index 00000000000..b5ef5888182
--- /dev/null
+++ b/static/usage/v7/config/mode/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <div class="container">
+    <ion-button
+      :color="color"
+      :fill="fill"
+      @click="showMode"
+    >
+      {{ modeValue }}
+    </ion-button>
+    <div class="mode-value" v-if="modeValue">
+      Current mode: {{ modeValue }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { getMode } from '@ionic/core';
+
+const modeValue = ref('');
+
+function showMode() {
+  modeValue.value = getMode();
+}
+
+const color = computed(() => modeValue.value === 'ios' ? 'secondary' : 'tertiary');
+const fill = computed(() => modeValue.value === 'ios' ? 'outline' : 'solid');
+
+onMounted(() => {
+  modeValue.value = getMode();
+});
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.mode-value {
+  margin-top: 16px;
+  font-weight: bold;
+}
+</style>
+```
\ No newline at end of file
diff --git a/static/usage/v8/config/mode/index.md b/static/usage/v8/config/mode/index.md
index f644f1be806..6c9d2cf8f1a 100644
--- a/static/usage/v8/config/mode/index.md
+++ b/static/usage/v8/config/mode/index.md
@@ -8,7 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
-  version="8"
+  version="7"
   code={{
     javascript,
     react,
diff --git a/versioned_docs/version-v7/developing/config.md b/versioned_docs/version-v7/developing/config.md
index b97ec2cd1ae..7c471584120 100644
--- a/versioned_docs/version-v7/developing/config.md
+++ b/versioned_docs/version-v7/developing/config.md
@@ -51,6 +51,14 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo
 
 <PerPlatformOverridesExample />
 
+## Accessing the Mode
+
+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.
+
+import IonicMode from '@site/static/usage/v7/config/mode/index.md';
+
+<IonicMode />
+
 ## Reading the Config (Angular)
 
 Ionic Angular provides a `Config` provider for accessing the Ionic Config.

From 3e936811761046df2e43625ab30db62399c969c5 Mon Sep 17 00:00:00 2001
From: joesphchang <joesphschang@gmail.com>
Date: Thu, 3 Jul 2025 12:41:34 -0500
Subject: [PATCH 4/4] docs(config): fixed no newline at endfile

---
 .../mode/angular/example_component_html.md    |  6 +-
 .../mode/angular/example_component_ts.md      |  6 +-
 static/usage/v7/config/mode/demo.html         | 88 +++++++++----------
 static/usage/v7/config/mode/index.md          |  2 +-
 static/usage/v7/config/mode/javascript.md     |  2 +-
 static/usage/v7/config/mode/react.md          |  2 +-
 static/usage/v7/config/mode/vue.md            | 54 +++++-------
 .../mode/angular/example_component_html.md    |  6 +-
 .../mode/angular/example_component_ts.md      |  6 +-
 static/usage/v8/config/mode/demo.html         | 88 +++++++++----------
 static/usage/v8/config/mode/index.md          |  2 +-
 static/usage/v8/config/mode/javascript.md     |  2 +-
 static/usage/v8/config/mode/react.md          |  2 +-
 static/usage/v8/config/mode/vue.md            | 54 +++++-------
 14 files changed, 148 insertions(+), 172 deletions(-)

diff --git a/static/usage/v7/config/mode/angular/example_component_html.md b/static/usage/v7/config/mode/angular/example_component_html.md
index 3c9e0eb1eb4..f3c1c3b8d96 100644
--- a/static/usage/v7/config/mode/angular/example_component_html.md
+++ b/static/usage/v7/config/mode/angular/example_component_html.md
@@ -9,9 +9,7 @@
       >
         {{ modeValue }}
       </ion-button>
-      <div class="mode-value" *ngIf="modeValue">
-        Current mode: {{ modeValue }}
-      </div>
+      <div class="mode-value" *ngIf="modeValue">Current mode: {{ modeValue }}</div>
     </div>
   </ion-content>
 </ion-app>
@@ -27,4 +25,4 @@
     font-weight: bold;
   }
 </style>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/config/mode/angular/example_component_ts.md b/static/usage/v7/config/mode/angular/example_component_ts.md
index daac2651690..b65903b2fe0 100644
--- a/static/usage/v7/config/mode/angular/example_component_ts.md
+++ b/static/usage/v7/config/mode/angular/example_component_ts.md
@@ -6,8 +6,8 @@ import { NgIf } from '@angular/common';
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html',
-  imports: [IonicModule, NgIf], 
-  standalone: true
+  imports: [IonicModule, NgIf],
+  standalone: true,
 })
 export class ExampleComponent {
   modeValue = '';
@@ -19,4 +19,4 @@ export class ExampleComponent {
     this.modeValue = this.config.get('mode');
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/config/mode/demo.html b/static/usage/v7/config/mode/demo.html
index 752587281f8..46bef3fa0d9 100644
--- a/static/usage/v7/config/mode/demo.html
+++ b/static/usage/v7/config/mode/demo.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Ionic Config Mode</title>
@@ -10,56 +9,55 @@
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
     <style>
-        .mode-value {
-            margin-top: 16px;
-            font-weight: bold;
-        }
-        .container {
-            display: flex;
-            flex-direction: column;
-            align-items: center; 
-            gap: 0;
-        }
+      .mode-value {
+        margin-top: 16px;
+        font-weight: bold;
+      }
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <ion-app>
-        <ion-content>
-            <div class="container">
-                <ion-button id="showModeBtn" color="primary" fill="solid">Show Current Mode</ion-button>
-                <div class="mode-value" id="modeValue"></div>
-            </div>
-        </ion-content>
+      <ion-content>
+        <div class="container">
+          <ion-button id="showModeBtn" color="primary" fill="solid">Show Current Mode</ion-button>
+          <div class="mode-value" id="modeValue"></div>
+        </div>
+      </ion-content>
     </ion-app>
     <script type="module">
-        function getMode() {
-            if (window.Ionic && window.Ionic.config && window.Ionic.config.get) {
-                return window.Ionic.config.get('mode');
-            } else {
-                return document.documentElement.getAttribute('mode') || 'md';
-            }
+      function getMode() {
+        if (window.Ionic && window.Ionic.config && window.Ionic.config.get) {
+          return window.Ionic.config.get('mode');
+        } else {
+          return document.documentElement.getAttribute('mode') || 'md';
         }
+      }
 
-        function updateButton(mode) {
-            const btn = document.getElementById('showModeBtn');
-            btn.innerText = mode;
-            btn.color = mode === 'ios' ? 'secondary' : 'tertiary';
-            btn.fill = mode === 'ios' ? 'outline' : 'solid';
-        }
+      function updateButton(mode) {
+        const btn = document.getElementById('showModeBtn');
+        btn.innerText = mode;
+        btn.color = mode === 'ios' ? 'secondary' : 'tertiary';
+        btn.fill = mode === 'ios' ? 'outline' : 'solid';
+      }
 
-        document.getElementById('showModeBtn').addEventListener('click', () => {
-            const mode = getMode();
-            document.getElementById('modeValue').textContent = `Current mode: ${mode}`;
-            updateButton(mode);
-        });
+      document.getElementById('showModeBtn').addEventListener('click', () => {
+        const mode = getMode();
+        document.getElementById('modeValue').textContent = `Current mode: ${mode}`;
+        updateButton(mode);
+      });
 
-        // Optionally, set initial state on load
-        document.addEventListener('DOMContentLoaded', () => {
-            const mode = getMode();
-            updateButton(mode);
-        });
+      // Optionally, set initial state on load
+      document.addEventListener('DOMContentLoaded', () => {
+        const mode = getMode();
+        updateButton(mode);
+      });
     </script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/static/usage/v7/config/mode/index.md b/static/usage/v7/config/mode/index.md
index f644f1be806..2a39f7cc794 100644
--- a/static/usage/v7/config/mode/index.md
+++ b/static/usage/v7/config/mode/index.md
@@ -21,4 +21,4 @@ import angular_example_component_ts from './angular/example_component_ts.md';
     },
   }}
   src="usage/v8/config/mode/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/v7/config/mode/javascript.md b/static/usage/v7/config/mode/javascript.md
index 74c92fedfd9..21523857f8f 100644
--- a/static/usage/v7/config/mode/javascript.md
+++ b/static/usage/v7/config/mode/javascript.md
@@ -42,4 +42,4 @@
     font-weight: bold;
   }
 </style>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/config/mode/react.md b/static/usage/v7/config/mode/react.md
index 4b54b72f004..18375822648 100644
--- a/static/usage/v7/config/mode/react.md
+++ b/static/usage/v7/config/mode/react.md
@@ -29,4 +29,4 @@ function Example() {
   );
 }
 export default Example;
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/config/mode/vue.md b/static/usage/v7/config/mode/vue.md
index b5ef5888182..69bf2ccbf73 100644
--- a/static/usage/v7/config/mode/vue.md
+++ b/static/usage/v7/config/mode/vue.md
@@ -1,46 +1,38 @@
 ```html
 <template>
   <div class="container">
-    <ion-button
-      :color="color"
-      :fill="fill"
-      @click="showMode"
-    >
-      {{ modeValue }}
-    </ion-button>
-    <div class="mode-value" v-if="modeValue">
-      Current mode: {{ modeValue }}
-    </div>
+    <ion-button :color="color" :fill="fill" @click="showMode"> {{ modeValue }} </ion-button>
+    <div class="mode-value" v-if="modeValue">Current mode: {{ modeValue }}</div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
-import { getMode } from '@ionic/core';
+  import { ref, computed, onMounted } from 'vue';
+  import { getMode } from '@ionic/core';
 
-const modeValue = ref('');
+  const modeValue = ref('');
 
-function showMode() {
-  modeValue.value = getMode();
-}
+  function showMode() {
+    modeValue.value = getMode();
+  }
 
-const color = computed(() => modeValue.value === 'ios' ? 'secondary' : 'tertiary');
-const fill = computed(() => modeValue.value === 'ios' ? 'outline' : 'solid');
+  const color = computed(() => (modeValue.value === 'ios' ? 'secondary' : 'tertiary'));
+  const fill = computed(() => (modeValue.value === 'ios' ? 'outline' : 'solid'));
 
-onMounted(() => {
-  modeValue.value = getMode();
-});
+  onMounted(() => {
+    modeValue.value = getMode();
+  });
 </script>
 
 <style scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.mode-value {
-  margin-top: 16px;
-  font-weight: bold;
-}
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .mode-value {
+    margin-top: 16px;
+    font-weight: bold;
+  }
 </style>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v8/config/mode/angular/example_component_html.md b/static/usage/v8/config/mode/angular/example_component_html.md
index 3c9e0eb1eb4..f3c1c3b8d96 100644
--- a/static/usage/v8/config/mode/angular/example_component_html.md
+++ b/static/usage/v8/config/mode/angular/example_component_html.md
@@ -9,9 +9,7 @@
       >
         {{ modeValue }}
       </ion-button>
-      <div class="mode-value" *ngIf="modeValue">
-        Current mode: {{ modeValue }}
-      </div>
+      <div class="mode-value" *ngIf="modeValue">Current mode: {{ modeValue }}</div>
     </div>
   </ion-content>
 </ion-app>
@@ -27,4 +25,4 @@
     font-weight: bold;
   }
 </style>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v8/config/mode/angular/example_component_ts.md b/static/usage/v8/config/mode/angular/example_component_ts.md
index daac2651690..b65903b2fe0 100644
--- a/static/usage/v8/config/mode/angular/example_component_ts.md
+++ b/static/usage/v8/config/mode/angular/example_component_ts.md
@@ -6,8 +6,8 @@ import { NgIf } from '@angular/common';
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html',
-  imports: [IonicModule, NgIf], 
-  standalone: true
+  imports: [IonicModule, NgIf],
+  standalone: true,
 })
 export class ExampleComponent {
   modeValue = '';
@@ -19,4 +19,4 @@ export class ExampleComponent {
     this.modeValue = this.config.get('mode');
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html
index 752587281f8..46bef3fa0d9 100644
--- a/static/usage/v8/config/mode/demo.html
+++ b/static/usage/v8/config/mode/demo.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Ionic Config Mode</title>
@@ -10,56 +9,55 @@
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
     <style>
-        .mode-value {
-            margin-top: 16px;
-            font-weight: bold;
-        }
-        .container {
-            display: flex;
-            flex-direction: column;
-            align-items: center; 
-            gap: 0;
-        }
+      .mode-value {
+        margin-top: 16px;
+        font-weight: bold;
+      }
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <ion-app>
-        <ion-content>
-            <div class="container">
-                <ion-button id="showModeBtn" color="primary" fill="solid">Show Current Mode</ion-button>
-                <div class="mode-value" id="modeValue"></div>
-            </div>
-        </ion-content>
+      <ion-content>
+        <div class="container">
+          <ion-button id="showModeBtn" color="primary" fill="solid">Show Current Mode</ion-button>
+          <div class="mode-value" id="modeValue"></div>
+        </div>
+      </ion-content>
     </ion-app>
     <script type="module">
-        function getMode() {
-            if (window.Ionic && window.Ionic.config && window.Ionic.config.get) {
-                return window.Ionic.config.get('mode');
-            } else {
-                return document.documentElement.getAttribute('mode') || 'md';
-            }
+      function getMode() {
+        if (window.Ionic && window.Ionic.config && window.Ionic.config.get) {
+          return window.Ionic.config.get('mode');
+        } else {
+          return document.documentElement.getAttribute('mode') || 'md';
         }
+      }
 
-        function updateButton(mode) {
-            const btn = document.getElementById('showModeBtn');
-            btn.innerText = mode;
-            btn.color = mode === 'ios' ? 'secondary' : 'tertiary';
-            btn.fill = mode === 'ios' ? 'outline' : 'solid';
-        }
+      function updateButton(mode) {
+        const btn = document.getElementById('showModeBtn');
+        btn.innerText = mode;
+        btn.color = mode === 'ios' ? 'secondary' : 'tertiary';
+        btn.fill = mode === 'ios' ? 'outline' : 'solid';
+      }
 
-        document.getElementById('showModeBtn').addEventListener('click', () => {
-            const mode = getMode();
-            document.getElementById('modeValue').textContent = `Current mode: ${mode}`;
-            updateButton(mode);
-        });
+      document.getElementById('showModeBtn').addEventListener('click', () => {
+        const mode = getMode();
+        document.getElementById('modeValue').textContent = `Current mode: ${mode}`;
+        updateButton(mode);
+      });
 
-        // Optionally, set initial state on load
-        document.addEventListener('DOMContentLoaded', () => {
-            const mode = getMode();
-            updateButton(mode);
-        });
+      // Optionally, set initial state on load
+      document.addEventListener('DOMContentLoaded', () => {
+        const mode = getMode();
+        updateButton(mode);
+      });
     </script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/static/usage/v8/config/mode/index.md b/static/usage/v8/config/mode/index.md
index 6c9d2cf8f1a..569a8a2ce34 100644
--- a/static/usage/v8/config/mode/index.md
+++ b/static/usage/v8/config/mode/index.md
@@ -21,4 +21,4 @@ import angular_example_component_ts from './angular/example_component_ts.md';
     },
   }}
   src="usage/v8/config/mode/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md
index 74c92fedfd9..21523857f8f 100644
--- a/static/usage/v8/config/mode/javascript.md
+++ b/static/usage/v8/config/mode/javascript.md
@@ -42,4 +42,4 @@
     font-weight: bold;
   }
 </style>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v8/config/mode/react.md b/static/usage/v8/config/mode/react.md
index 4b54b72f004..18375822648 100644
--- a/static/usage/v8/config/mode/react.md
+++ b/static/usage/v8/config/mode/react.md
@@ -29,4 +29,4 @@ function Example() {
   );
 }
 export default Example;
-```
\ No newline at end of file
+```
diff --git a/static/usage/v8/config/mode/vue.md b/static/usage/v8/config/mode/vue.md
index b5ef5888182..69bf2ccbf73 100644
--- a/static/usage/v8/config/mode/vue.md
+++ b/static/usage/v8/config/mode/vue.md
@@ -1,46 +1,38 @@
 ```html
 <template>
   <div class="container">
-    <ion-button
-      :color="color"
-      :fill="fill"
-      @click="showMode"
-    >
-      {{ modeValue }}
-    </ion-button>
-    <div class="mode-value" v-if="modeValue">
-      Current mode: {{ modeValue }}
-    </div>
+    <ion-button :color="color" :fill="fill" @click="showMode"> {{ modeValue }} </ion-button>
+    <div class="mode-value" v-if="modeValue">Current mode: {{ modeValue }}</div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
-import { getMode } from '@ionic/core';
+  import { ref, computed, onMounted } from 'vue';
+  import { getMode } from '@ionic/core';
 
-const modeValue = ref('');
+  const modeValue = ref('');
 
-function showMode() {
-  modeValue.value = getMode();
-}
+  function showMode() {
+    modeValue.value = getMode();
+  }
 
-const color = computed(() => modeValue.value === 'ios' ? 'secondary' : 'tertiary');
-const fill = computed(() => modeValue.value === 'ios' ? 'outline' : 'solid');
+  const color = computed(() => (modeValue.value === 'ios' ? 'secondary' : 'tertiary'));
+  const fill = computed(() => (modeValue.value === 'ios' ? 'outline' : 'solid'));
 
-onMounted(() => {
-  modeValue.value = getMode();
-});
+  onMounted(() => {
+    modeValue.value = getMode();
+  });
 </script>
 
 <style scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.mode-value {
-  margin-top: 16px;
-  font-weight: bold;
-}
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .mode-value {
+    margin-top: 16px;
+    font-weight: bold;
+  }
 </style>
-```
\ No newline at end of file
+```