docs(config): add code snippets of how to access the mode per framework #4147

joesphchang · 2025-06-11T17:56:29Z

Added ionic-mode to the appropriate section in Config

Initial issue: Issue #2580

Preview

vercel · 2025-06-11T17:56:33Z

@joesphchang is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-06-12T14:47:12Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 26, 2025 7:42pm

brandyscarney · 2025-06-13T14:16:47Z

Thank you for this!

I spoke with the team, and we think it would be clearer if getting the mode were its own section, separate from the get method. This helps make it more obvious that the get method isn't available in all frameworks.

For example, Angular would remain the same:

And a new section would be added, either before or after the Angular one:

Additionally, we should make sure that all framework examples are consistent. This would be a good use case for adding a playground if we want to apply styles based on the mode. You can see an example of a playground in a guide page here: https://ionicframework.com/docs/utilities/gestures#basic-gestures

And the source code for that example is here: https://github.com/ionic-team/ionic-docs/tree/main/static/usage/v8/gestures/basic

Lastly, we need to make sure this documentation is also added to the v7 directories:

Let me know if you have any questions!

brandyscarney · 2025-06-23T14:52:47Z

docs/angular/your-first-app.md

Could you please remove the unrelated changes to your-first-app from this PR? 🙂

I believe I removed it and pushed back up the changes!

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

…onic-team#4153) Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

…team#4152) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

…lsewhere

…xisting colors

thetaPC

There's also some files that are not relevant to this PR. Please revert those.

thetaPC · 2025-06-26T19:45:44Z

docs/developing/config.md

@@ -51,6 +51,14 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo

 <PerPlatformOverridesExample />

+## Accessing the Current Mode Programmatically


Suggested change

## Accessing the Current Mode Programmatically

## Accessing the Mode

Let's aim for short titles.

thetaPC · 2025-06-26T19:48:17Z

static/usage/v8/config/mode/angular/example_component_html.md

+<ion-app>
+  <ion-content>
+    <div class="container">
+      <ion-button (click)="showMode()">Show Current Mode</ion-button>


Suggested change

<ion-button (click)="showMode()">Show Current Mode</ion-button>

<ion-button (click)="showMode()">Show Mode</ion-button>

thetaPC · 2025-06-26T19:51:51Z

static/usage/v8/config/mode/angular/example_component_html.md

+  <ion-content>
+    <div class="container">
+      <ion-button (click)="showMode()">Show Current Mode</ion-button>
+      <div class="mode-value">{{ modeValue }}</div>


Update this to be consistent with the text from the demo. This one is missing Current mode: . All the frameworks need to match the demo for consistency.

thetaPC · 2025-06-26T19:52:32Z

static/usage/v8/config/mode/angular/example_component_html.md

The Stackblitz environment does not work. This can be seen by selecting "Angular" under the tabs and then the StackBlitz logo. The environment needs to be fixed.

thetaPC · 2025-06-26T19:53:12Z

static/usage/v8/config/mode/demo.html

+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ionic Config Mode Example</title>


Suggested change

<title>Ionic Config Mode Example</title>

<title>Ionic Config Mode</title>

thetaPC · 2025-06-26T19:55:26Z

static/usage/v8/config/mode/demo.html

+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+    <style>
+      .container {
+        /* display: block; */


Remove any unused code.

Suggested change

/* display: block; */

thetaPC · 2025-06-26T23:56:24Z

static/usage/v8/config/mode/javascript.md

@@ -0,0 +1,15 @@
+```html
+<button id="showModeBtn">Show Current Mode</button>


This should be using an ion-button since that's what the demo is using.

thetaPC · 2025-06-26T23:57:33Z

static/usage/v8/config/mode/react.md

+  return (
+    <>
+      <IonButton onClick={showMode}>Show Current Mode</IonButton>
+      <div className="mode-value">{modeValue && `Current mode: ${modeValue}`}</div>


This should have the same styling as the demo. Same reason, for consistency.

thetaPC · 2025-06-26T23:58:14Z

static/usage/v8/config/mode/vue.md

+```html
+<template>
+  <ion-button @click="showMode">Show Current Mode</ion-button>
+  <div class="mode-value" v-if="modeValue">Current mode: {{ modeValue }}</div>


This should have the same styling as the demo. Same reason, for consistency.

thetaPC · 2025-06-27T00:01:20Z

static/usage/v8/config/mode/demo.html

+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="showModeBtn">Show Current Mode</ion-button>


Let's change the button to be more visual based. For example, let's set the color and fill based on the mode and the button text should be the mode.

<IonButton color={mode === 'ios' ? 'secondary' : 'tertiary'} fill={mode === 'ios' ? 'outline' : 'solid'}> {mode} </IonButton>

The example is in React, just update the code to be appropriate per framework.

docs(config): added given code-snippets to config file

6c433ba

joesphchang requested a review from a team as a code owner June 11, 2025 17:56

joesphchang requested a review from brandyscarney June 11, 2025 17:56

vercel bot deployed to Preview June 12, 2025 14:50 View deployment

docs(config): fixed spelling error

1c5ac9c

joesphchang closed this Jun 12, 2025

joesphchang reopened this Jun 12, 2025

brandyscarney changed the title ~~docs(config): added given code-snippets to config file~~ docs(config): add code snippets of how to access the mode per framework Jun 13, 2025

joesphchang added 4 commits June 17, 2025 17:45

docs(config): added new folder to v8 for ionic-mode

19c8675

docs(config): added dummy code for playground to work

ce5e829

docs(config): Added ionic-mode to config tab

06ca426

docs(config): added iconic-mode to v7 config docs

b9f6eab

vercel bot deployed to Preview June 23, 2025 14:32 View deployment

brandyscarney reviewed Jun 23, 2025

View reviewed changes

brandyscarney requested a review from thetaPC June 23, 2025 15:28

joesphchang and others added 12 commits June 24, 2025 10:39

docs(config): added ionic-mode docs to Reading the Config"

3a10711

chore(deps): update ionic to v8.6.1 (ionic-team#4148)

2d4b31d

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

docs(accordion): update demos to always set accordion to 300px wide (i…

3d89f76

…onic-team#4153) Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

chore(deps): update dependency @vitejs/plugin-react to v4.5.2 (ionic-…

2decf9e

…team#4152) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency @types/node to v22.15.31 (ionic-team#4151

aab3038

) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency @types/react to v19.1.7 (ionic-team#4150)

bd246a2

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency web-vitals to v5.0.3 (ionic-team#4155)

7fed84d

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency @types/react to v19.1.8 (ionic-team#4154)

096bd2f

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

docs(docusaurus): add support for diff language syntax highlighting

f28d5bd

docs(docusaurus): add .token.deleted css selector back in case used e…

a205534

…lsewhere

docs(docusaurus): remove diff style section, move diff selectors to e…

ce4c3e4

…xisting colors

docs(config): fixed spellcheck

67c3ac9

docs(config): fixed spell check

7b3b3b9

joesphchang force-pushed the ionic-mode-config branch from 5b39351 to 7b3b3b9 Compare June 24, 2025 15:39

Merge branch 'main' into ionic-mode-config

8476a80

vercel bot deployed to Preview June 26, 2025 19:42 View deployment

thetaPC requested changes Jun 27, 2025

View reviewed changes

		@@ -51,6 +51,14 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo

		<PerPlatformOverridesExample />

		## Accessing the Current Mode Programmatically

	## Accessing the Current Mode Programmatically
	## Accessing the Mode

	<ion-button (click)="showMode()">Show Current Mode</ion-button>
	<ion-button (click)="showMode()">Show Mode</ion-button>

	<title>Ionic Config Mode Example</title>
	<title>Ionic Config Mode</title>

		@@ -0,0 +1,15 @@
		```html
		<button id="showModeBtn">Show Current Mode</button>

docs(config): add code snippets of how to access the mode per framework #4147

Are you sure you want to change the base?

docs(config): add code snippets of how to access the mode per framework #4147

Uh oh!

Conversation

joesphchang commented Jun 11, 2025 • edited by brandyscarney Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Jun 11, 2025

Uh oh!

vercel bot commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brandyscarney commented Jun 13, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

joesphchang commented Jun 11, 2025 •

edited by brandyscarney

Loading

vercel bot commented Jun 12, 2025 •

edited

Loading