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/7] 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/7] 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/7] 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/7] 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
+```

From 675dfbd6ac01475b2ed1ca5b82eeb3e530e4b993 Mon Sep 17 00:00:00 2001
From: joesphchang <joesphschang@gmail.com>
Date: Tue, 8 Jul 2025 10:39:36 -0500
Subject: [PATCH 5/7] config(docs): made suggested changes to code-base and
 simplify the examples

---
 .../mode/angular/example_component_html.md    | 32 +++---------
 .../mode/angular/example_component_ts.md      | 15 ++----
 static/usage/v7/config/mode/index.md          |  4 +-
 static/usage/v7/config/mode/javascript.md     | 49 ++++---------------
 static/usage/v7/config/mode/react.md          | 25 ++++------
 static/usage/v7/config/mode/vue.md            | 32 +++---------
 .../mode/angular/example_component_html.md    | 32 +++---------
 .../mode/angular/example_component_ts.md      | 15 ++----
 static/usage/v8/config/mode/demo.html         | 36 +++-----------
 static/usage/v8/config/mode/index.md          |  2 +-
 static/usage/v8/config/mode/javascript.md     | 48 +++---------------
 static/usage/v8/config/mode/react.md          | 26 ++++------
 static/usage/v8/config/mode/vue.md            | 32 +++---------
 13 files changed, 81 insertions(+), 267 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 f3c1c3b8d96..ec070d774a9 100644
--- a/static/usage/v7/config/mode/angular/example_component_html.md
+++ b/static/usage/v7/config/mode/angular/example_component_html.md
@@ -1,28 +1,8 @@
 ```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>
+<ion-button
+  [color]="mode === 'ios' ? 'secondary' : 'tertiary'"
+  [fill]="mode === 'ios' ? 'outline' : 'solid'"
+>
+  Current mode: {{ mode }}
+</ion-button>
 ```
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 b65903b2fe0..5ea2320af2b 100644
--- a/static/usage/v7/config/mode/angular/example_component_ts.md
+++ b/static/usage/v7/config/mode/angular/example_component_ts.md
@@ -1,22 +1,17 @@
 ```ts
 import { Component } from '@angular/core';
-import { Config, IonicModule } from '@ionic/angular';
-import { NgIf } from '@angular/common';
+import { Config, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html',
-  imports: [IonicModule, NgIf],
-  standalone: true,
+  imports: [IonButton]
 })
-export class ExampleComponent {
-  modeValue = '';
 
+export class ExampleComponent {
+  mode: string;
   constructor(public config: Config) {
-    this.modeValue = this.config.get('mode');
-  }
-  showMode() {
-    this.modeValue = this.config.get('mode');
+    this.mode = this.config.get('mode');
   }
 }
 ```
diff --git a/static/usage/v7/config/mode/index.md b/static/usage/v7/config/mode/index.md
index 2a39f7cc794..f81cca1df75 100644
--- a/static/usage/v7/config/mode/index.md
+++ b/static/usage/v7/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,
@@ -20,5 +20,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
       },
     },
   }}
-  src="usage/v8/config/mode/demo.html"
+  src="usage/v7/config/mode/demo.html"
 />
diff --git a/static/usage/v7/config/mode/javascript.md b/static/usage/v7/config/mode/javascript.md
index 21523857f8f..42f4b6e099b 100644
--- a/static/usage/v7/config/mode/javascript.md
+++ b/static/usage/v7/config/mode/javascript.md
@@ -1,45 +1,14 @@
 ```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';
-  }
+<ion-button id="modeButton">Current mode: <span id="modeValue"></span></ion-button>
 
-  document.getElementById('showModeBtn').addEventListener('click', () => {
-    const mode = getMode();
-    document.getElementById('modeValue').textContent = `Current mode: ${mode}`;
-    updateButton(mode);
-  });
+<script>
+  const modeButton = document.querySelector('#modeButton');
+  const modeValue = document.querySelector('#modeValue');
+  const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md';
+  
+  modeValue.textContent = mode;
 
-  // Optionally, set initial state on load
-  document.addEventListener('DOMContentLoaded', () => {
-    const mode = getMode();
-    updateButton(mode);
-  });
+  modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary');
+  modeButton.setAttribute('fill', mode === 'ios' ? 'outline' : 'solid');
 </script>
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .mode-value {
-    margin-top: 16px;
-    font-weight: bold;
-  }
-</style>
 ```
diff --git a/static/usage/v7/config/mode/react.md b/static/usage/v7/config/mode/react.md
index 18375822648..3699e778a85 100644
--- a/static/usage/v7/config/mode/react.md
+++ b/static/usage/v7/config/mode/react.md
@@ -4,29 +4,22 @@ import { IonButton } from '@ionic/react';
 import { getMode } from '@ionic/core';
 
 function Example() {
-  const [modeValue, setModeValue] = useState('');
+  const [mode, setMode] = useState('');
 
   useEffect(() => {
-    setModeValue(getMode());
+    const mode = getMode() || 'md';
+    setMode(mode);
   }, []);
 
-  const showMode = () => {
-    setModeValue(getMode());
-  };
-
-  const color = modeValue === 'ios' ? 'secondary' : 'tertiary';
-  const fill = modeValue === 'ios' ? 'outline' : 'solid';
+  const color = mode === 'ios' ? 'secondary' : 'tertiary';
+  const fill = mode === '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>
+    <IonButton color={color} fill={fill}>
+      Current mode: {mode}
+    </IonButton>
   );
 }
+
 export default Example;
 ```
diff --git a/static/usage/v7/config/mode/vue.md b/static/usage/v7/config/mode/vue.md
index 69bf2ccbf73..997fdae865c 100644
--- a/static/usage/v7/config/mode/vue.md
+++ b/static/usage/v7/config/mode/vue.md
@@ -1,38 +1,20 @@
 ```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>
+  <ion-button :color="color" :fill="fill"> Current mode: {{ mode }} </ion-button>
 </template>
 
 <script setup>
   import { ref, computed, onMounted } from 'vue';
+  import { IonButton } from '@ionic/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'));
+  const mode = ref('');
 
+  const color = computed(() => (mode.value === 'ios' ? 'secondary' : 'tertiary'));
+  const fill = computed(() => (mode.value === 'ios' ? 'outline' : 'solid'));
+  
   onMounted(() => {
-    modeValue.value = getMode();
+    mode.value = getMode() || 'md';
   });
 </script>
-
-<style scoped>
-  .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .mode-value {
-    margin-top: 16px;
-    font-weight: bold;
-  }
-</style>
 ```
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 f3c1c3b8d96..ec070d774a9 100644
--- a/static/usage/v8/config/mode/angular/example_component_html.md
+++ b/static/usage/v8/config/mode/angular/example_component_html.md
@@ -1,28 +1,8 @@
 ```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>
+<ion-button
+  [color]="mode === 'ios' ? 'secondary' : 'tertiary'"
+  [fill]="mode === 'ios' ? 'outline' : 'solid'"
+>
+  Current mode: {{ mode }}
+</ion-button>
 ```
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 b65903b2fe0..5ea2320af2b 100644
--- a/static/usage/v8/config/mode/angular/example_component_ts.md
+++ b/static/usage/v8/config/mode/angular/example_component_ts.md
@@ -1,22 +1,17 @@
 ```ts
 import { Component } from '@angular/core';
-import { Config, IonicModule } from '@ionic/angular';
-import { NgIf } from '@angular/common';
+import { Config, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html',
-  imports: [IonicModule, NgIf],
-  standalone: true,
+  imports: [IonButton]
 })
-export class ExampleComponent {
-  modeValue = '';
 
+export class ExampleComponent {
+  mode: string;
   constructor(public config: Config) {
-    this.modeValue = this.config.get('mode');
-  }
-  showMode() {
-    this.modeValue = this.config.get('mode');
+    this.mode = this.config.get('mode');
   }
 }
 ```
diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html
index 46bef3fa0d9..f5bf6e9d0c1 100644
--- a/static/usage/v8/config/mode/demo.html
+++ b/static/usage/v8/config/mode/demo.html
@@ -21,43 +21,21 @@
       }
     </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>
+          <ion-button id="modeButton">Current mode:  <span id="modeValue"></span></ion-button>
         </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);
-      });
+      const modeButton = document.querySelector('#modeButton');
+      const modeValue = document.querySelector('#modeValue');
+      const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md';
+      modeValue.textContent = mode;
+      modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary');
+      modeButton.setAttribute('fill', mode === 'ios' ? 'outline' : 'solid');
     </script>
   </body>
 </html>
diff --git a/static/usage/v8/config/mode/index.md b/static/usage/v8/config/mode/index.md
index 569a8a2ce34..2a39f7cc794 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="7"
+  version="8"
   code={{
     javascript,
     react,
diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md
index 21523857f8f..43f43271263 100644
--- a/static/usage/v8/config/mode/javascript.md
+++ b/static/usage/v8/config/mode/javascript.md
@@ -1,45 +1,13 @@
 ```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>
+<ion-button id="modeButton">Current mode: <span id="modeValue"></span></ion-button>
 <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';
-    }
-  }
+  const modeButton = document.querySelector('#modeButton');
+  const modeValue = document.querySelector('#modeValue');
+  const mode = window.Ionic.config.get('mode') || 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);
-  });
+  modeValue.textContent = mode;
+  
+  modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary');
+  modeButton.setAttribute('fill', mode === 'ios' ? 'outline' : 'solid');
 </script>
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .mode-value {
-    margin-top: 16px;
-    font-weight: bold;
-  }
-</style>
 ```
diff --git a/static/usage/v8/config/mode/react.md b/static/usage/v8/config/mode/react.md
index 18375822648..1c2f5ab0d6b 100644
--- a/static/usage/v8/config/mode/react.md
+++ b/static/usage/v8/config/mode/react.md
@@ -4,28 +4,20 @@ import { IonButton } from '@ionic/react';
 import { getMode } from '@ionic/core';
 
 function Example() {
-  const [modeValue, setModeValue] = useState('');
+  const [mode, setMode] = useState('');
 
   useEffect(() => {
-    setModeValue(getMode());
+    const mode = getMode() || 'md';
+    setMode(mode);
   }, []);
-
-  const showMode = () => {
-    setModeValue(getMode());
-  };
-
-  const color = modeValue === 'ios' ? 'secondary' : 'tertiary';
-  const fill = modeValue === 'ios' ? 'outline' : 'solid';
+  
+  const color = mode === 'ios' ? 'secondary' : 'tertiary';
+  const fill = mode === '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>
+    <IonButton color={color} fill={fill}>
+      Current mode: {mode}
+    </IonButton>
   );
 }
 export default Example;
diff --git a/static/usage/v8/config/mode/vue.md b/static/usage/v8/config/mode/vue.md
index 69bf2ccbf73..161fdace85e 100644
--- a/static/usage/v8/config/mode/vue.md
+++ b/static/usage/v8/config/mode/vue.md
@@ -1,38 +1,20 @@
 ```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>
+  <ion-button :color="color" :fill="fill"> Current mode: {{ mode }} </ion-button>
 </template>
 
 <script setup>
   import { ref, computed, onMounted } from 'vue';
+  import { IonButton } from '@ionic/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'));
+  const mode = ref('');
+  
+  const color = computed(() => (mode.value === 'ios' ? 'secondary' : 'tertiary'));
+  const fill = computed(() => (mode.value === 'ios' ? 'outline' : 'solid'));
 
   onMounted(() => {
-    modeValue.value = getMode();
+    mode.value = getMode() || 'md';
   });
 </script>
-
-<style scoped>
-  .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .mode-value {
-    margin-top: 16px;
-    font-weight: bold;
-  }
-</style>
 ```

From d110c24021c3b0a85158737ec6b80485dba2416a Mon Sep 17 00:00:00 2001
From: joesphchang <joesphschang@gmail.com>
Date: Tue, 8 Jul 2025 10:40:32 -0500
Subject: [PATCH 6/7] docs(config): ran npm run lint

---
 .../usage/v7/config/mode/angular/example_component_html.md   | 5 +----
 static/usage/v7/config/mode/angular/example_component_ts.md  | 3 +--
 static/usage/v7/config/mode/javascript.md                    | 2 +-
 static/usage/v7/config/mode/vue.md                           | 2 +-
 .../usage/v8/config/mode/angular/example_component_html.md   | 5 +----
 static/usage/v8/config/mode/angular/example_component_ts.md  | 3 +--
 static/usage/v8/config/mode/demo.html                        | 2 +-
 static/usage/v8/config/mode/javascript.md                    | 2 +-
 static/usage/v8/config/mode/react.md                         | 2 +-
 static/usage/v8/config/mode/vue.md                           | 2 +-
 10 files changed, 10 insertions(+), 18 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 ec070d774a9..759329a97da 100644
--- a/static/usage/v7/config/mode/angular/example_component_html.md
+++ b/static/usage/v7/config/mode/angular/example_component_html.md
@@ -1,8 +1,5 @@
 ```html
-<ion-button
-  [color]="mode === 'ios' ? 'secondary' : 'tertiary'"
-  [fill]="mode === 'ios' ? 'outline' : 'solid'"
->
+<ion-button [color]="mode === 'ios' ? 'secondary' : 'tertiary'" [fill]="mode === 'ios' ? 'outline' : 'solid'">
   Current mode: {{ mode }}
 </ion-button>
 ```
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 5ea2320af2b..5f0d31b1a3c 100644
--- a/static/usage/v7/config/mode/angular/example_component_ts.md
+++ b/static/usage/v7/config/mode/angular/example_component_ts.md
@@ -5,9 +5,8 @@ import { Config, IonButton } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html',
-  imports: [IonButton]
+  imports: [IonButton],
 })
-
 export class ExampleComponent {
   mode: string;
   constructor(public config: Config) {
diff --git a/static/usage/v7/config/mode/javascript.md b/static/usage/v7/config/mode/javascript.md
index 42f4b6e099b..106100c35d9 100644
--- a/static/usage/v7/config/mode/javascript.md
+++ b/static/usage/v7/config/mode/javascript.md
@@ -5,7 +5,7 @@
   const modeButton = document.querySelector('#modeButton');
   const modeValue = document.querySelector('#modeValue');
   const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md';
-  
+
   modeValue.textContent = mode;
 
   modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary');
diff --git a/static/usage/v7/config/mode/vue.md b/static/usage/v7/config/mode/vue.md
index 997fdae865c..a227337a408 100644
--- a/static/usage/v7/config/mode/vue.md
+++ b/static/usage/v7/config/mode/vue.md
@@ -12,7 +12,7 @@
 
   const color = computed(() => (mode.value === 'ios' ? 'secondary' : 'tertiary'));
   const fill = computed(() => (mode.value === 'ios' ? 'outline' : 'solid'));
-  
+
   onMounted(() => {
     mode.value = getMode() || 'md';
   });
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 ec070d774a9..759329a97da 100644
--- a/static/usage/v8/config/mode/angular/example_component_html.md
+++ b/static/usage/v8/config/mode/angular/example_component_html.md
@@ -1,8 +1,5 @@
 ```html
-<ion-button
-  [color]="mode === 'ios' ? 'secondary' : 'tertiary'"
-  [fill]="mode === 'ios' ? 'outline' : 'solid'"
->
+<ion-button [color]="mode === 'ios' ? 'secondary' : 'tertiary'" [fill]="mode === 'ios' ? 'outline' : 'solid'">
   Current mode: {{ mode }}
 </ion-button>
 ```
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 5ea2320af2b..5f0d31b1a3c 100644
--- a/static/usage/v8/config/mode/angular/example_component_ts.md
+++ b/static/usage/v8/config/mode/angular/example_component_ts.md
@@ -5,9 +5,8 @@ import { Config, IonButton } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html',
-  imports: [IonButton]
+  imports: [IonButton],
 })
-
 export class ExampleComponent {
   mode: string;
   constructor(public config: Config) {
diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html
index f5bf6e9d0c1..08973e7ca15 100644
--- a/static/usage/v8/config/mode/demo.html
+++ b/static/usage/v8/config/mode/demo.html
@@ -25,7 +25,7 @@
     <ion-app>
       <ion-content>
         <div class="container">
-          <ion-button id="modeButton">Current mode:  <span id="modeValue"></span></ion-button>
+          <ion-button id="modeButton">Current mode: <span id="modeValue"></span></ion-button>
         </div>
       </ion-content>
     </ion-app>
diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md
index 43f43271263..fe11af40fdc 100644
--- a/static/usage/v8/config/mode/javascript.md
+++ b/static/usage/v8/config/mode/javascript.md
@@ -6,7 +6,7 @@
   const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md';
 
   modeValue.textContent = mode;
-  
+
   modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary');
   modeButton.setAttribute('fill', mode === 'ios' ? 'outline' : 'solid');
 </script>
diff --git a/static/usage/v8/config/mode/react.md b/static/usage/v8/config/mode/react.md
index 1c2f5ab0d6b..3de2faf85a1 100644
--- a/static/usage/v8/config/mode/react.md
+++ b/static/usage/v8/config/mode/react.md
@@ -10,7 +10,7 @@ function Example() {
     const mode = getMode() || 'md';
     setMode(mode);
   }, []);
-  
+
   const color = mode === 'ios' ? 'secondary' : 'tertiary';
   const fill = mode === 'ios' ? 'outline' : 'solid';
 
diff --git a/static/usage/v8/config/mode/vue.md b/static/usage/v8/config/mode/vue.md
index 161fdace85e..a227337a408 100644
--- a/static/usage/v8/config/mode/vue.md
+++ b/static/usage/v8/config/mode/vue.md
@@ -9,7 +9,7 @@
   import { getMode } from '@ionic/core';
 
   const mode = ref('');
-  
+
   const color = computed(() => (mode.value === 'ios' ? 'secondary' : 'tertiary'));
   const fill = computed(() => (mode.value === 'ios' ? 'outline' : 'solid'));
 

From 10e159a5bb6f47a30bfa0dfec340ad4662a9a5b9 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 8 Jul 2025 14:47:02 -0400
Subject: [PATCH 7/7] docs(config): update demo and js examples

---
 static/usage/v7/config/mode/demo.html     | 34 ++++-------------------
 static/usage/v7/config/mode/javascript.md |  6 ++--
 static/usage/v8/config/mode/demo.html     |  6 ++--
 static/usage/v8/config/mode/javascript.md |  7 ++---
 4 files changed, 14 insertions(+), 39 deletions(-)

diff --git a/static/usage/v7/config/mode/demo.html b/static/usage/v7/config/mode/demo.html
index 46bef3fa0d9..8762f394ba5 100644
--- a/static/usage/v7/config/mode/demo.html
+++ b/static/usage/v7/config/mode/demo.html
@@ -21,43 +21,21 @@
       }
     </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>
+          <ion-button id="modeButton"></ion-button>
         </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);
-      });
+      const modeButton = document.querySelector('#modeButton');
+      const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md';
 
-      // Optionally, set initial state on load
-      document.addEventListener('DOMContentLoaded', () => {
-        const mode = getMode();
-        updateButton(mode);
-      });
+      modeButton.innerHTML = `Current mode: ${mode}`;
+      modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary');
+      modeButton.setAttribute('fill', mode === 'ios' ? 'outline' : 'solid');
     </script>
   </body>
 </html>
diff --git a/static/usage/v7/config/mode/javascript.md b/static/usage/v7/config/mode/javascript.md
index 106100c35d9..86b8b111d5f 100644
--- a/static/usage/v7/config/mode/javascript.md
+++ b/static/usage/v7/config/mode/javascript.md
@@ -1,13 +1,11 @@
 ```html
-<ion-button id="modeButton">Current mode: <span id="modeValue"></span></ion-button>
+<ion-button id="modeButton"></ion-button>
 
 <script>
   const modeButton = document.querySelector('#modeButton');
-  const modeValue = document.querySelector('#modeValue');
   const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md';
 
-  modeValue.textContent = mode;
-
+  modeButton.innerHTML = `Current mode: ${mode}`;
   modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary');
   modeButton.setAttribute('fill', mode === 'ios' ? 'outline' : 'solid');
 </script>
diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html
index 08973e7ca15..8762f394ba5 100644
--- a/static/usage/v8/config/mode/demo.html
+++ b/static/usage/v8/config/mode/demo.html
@@ -25,15 +25,15 @@
     <ion-app>
       <ion-content>
         <div class="container">
-          <ion-button id="modeButton">Current mode: <span id="modeValue"></span></ion-button>
+          <ion-button id="modeButton"></ion-button>
         </div>
       </ion-content>
     </ion-app>
     <script type="module">
       const modeButton = document.querySelector('#modeButton');
-      const modeValue = document.querySelector('#modeValue');
       const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md';
-      modeValue.textContent = mode;
+
+      modeButton.innerHTML = `Current mode: ${mode}`;
       modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary');
       modeButton.setAttribute('fill', mode === 'ios' ? 'outline' : 'solid');
     </script>
diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md
index fe11af40fdc..86b8b111d5f 100644
--- a/static/usage/v8/config/mode/javascript.md
+++ b/static/usage/v8/config/mode/javascript.md
@@ -1,12 +1,11 @@
 ```html
-<ion-button id="modeButton">Current mode: <span id="modeValue"></span></ion-button>
+<ion-button id="modeButton"></ion-button>
+
 <script>
   const modeButton = document.querySelector('#modeButton');
-  const modeValue = document.querySelector('#modeValue');
   const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md';
 
-  modeValue.textContent = mode;
-
+  modeButton.innerHTML = `Current mode: ${mode}`;
   modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary');
   modeButton.setAttribute('fill', mode === 'ios' ? 'outline' : 'solid');
 </script>