ionic-team · brandyscarney · Jul 8, 2025 · Jul 1, 2025 · Jul 2, 2025 · Jul 2, 2025
@@ -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/v8/config/mode/index.md';
+
+<IonicMode />
+
 ## Reading the Config (Angular)
 
 Ionic Angular provides a `Config` provider for accessing the Ionic Config.

@@ -0,0 +1,28 @@
+```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>
+```
@@ -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');
+  }
+}
+```
@@ -0,0 +1,63 @@
+<!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>
@@ -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"
+/>
@@ -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>
+```
@@ -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;
+```
@@ -0,0 +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>
+  </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>
+```
@@ -0,0 +1,28 @@
+```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>
+```
@@ -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');
+  }
+}
+```
@@ -0,0 +1,63 @@
+<!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>