diff --git a/src/app/generated/projects/ionic-theme-md3.en.generated.ts b/src/app/generated/projects/ionic-theme-md3.en.generated.ts index e909150..5087453 100644 --- a/src/app/generated/projects/ionic-theme-md3.en.generated.ts +++ b/src/app/generated/projects/ionic-theme-md3.en.generated.ts @@ -36,7 +36,7 @@ export const PROJECT = { "file": "readme.md", "section": "Documentation", "path": "/projects/ionic-theme-md3/docs/readme", - "html": "

Overview

\n

This library provides CSS/JS files that bring the Material Design 3 design system to Ionic applications. It updates the look and feel of Ionic components to match the latest Material Design 3 guidelines.

\n

This project aims to follow the core concepts of Ionic as closely as possible, while placing a strong emphasis on compatibility with @rdlabo/ionic-theme-ios26. Just as Ionic provides beautiful styling whether it displays the ios or md theme from a single HTML structure, our goal is to ensure that this theme and @rdlabo/ionic-theme-ios26 are fully compatible.

\n

If you don't know about @rdlabo/ionic-theme-ios26, you should definitely give it a try!

\n

👉️rdlabo-dev/ionic-theme-ios26

\n

Related Projects

\n

If you need a more comprehensive Material Design 3 implementation, you may also be interested in:

\n\n
\n

Note: This theme is purpose-built for compatibility with Ionic's design approach and @rdlabo/ionic-theme-ios26; it is not intended as a strict, full MD3 recreation.

\n
\n

Quick start

\n

After Installation, import the theme CSS and set navAnimation as shown below.

\n

Installation

\n

This is a CSS theme for extending your Ionic project. It does not work on its own, so use it together with the Ionic Framework.

\n
npm install @rdlabo/ionic-theme-md3\n

Note: If you use @ionic/core@ < 8.8.0, use @rdlabo/ionic-theme-md3@1.0.2.

\n

And import the theme in your project's main CSS file (e.g., src/styles.scss).

\n
@import '@rdlabo/ionic-theme-md3/dist/css/default-variables.css';\n@import '@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css';\n

Optional: use the MD3 and iOS 26 themes together

\n

Install the iOS 26 theme to style both Ionic modes from the same application.

\n

The current releases of both themes require @ionic/core 8.8.1 or later. Upgrade Ionic before using this setup if your application is on 8.8.0 or earlier.

\n
npm install @rdlabo/ionic-theme-ios26\n

When your global stylesheet uses Sass, initialize the themes in this order:

\n
@use '@rdlabo/ionic-theme-ios26/src/styles/default-variables.scss' as ios26-vars;\n@use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26.scss';\n@use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class.scss';\n@use '@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect.scss';\n@use '@rdlabo/ionic-theme-md3/dist/css/default-variables.css' as md3-vars;\n@use '@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css';\n

The example uses Ionic's class-based dark mode. Your global stylesheet must also load Ionic's matching dark palette, such as @ionic/angular/css/palettes/dark.class.css for Angular. When using dark-system or dark-always, select the same variant for both Ionic's palette and the iOS 26 theme. See Ionic's Dark Mode documentation. The explicit ios26-vars and md3-vars namespaces prevent the two variable modules from using the same default namespace.

\n

Configure both transition implementations when both themes are installed:

\n
import { isPlatform } from '@ionic/core'; // or @ionic/angular (Ionic 9), @ionic/angular/standalone (Ionic 8), @ionic/react, @ionic/vue\nimport { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios26';\nimport { mdTransitionAnimation } from '@rdlabo/ionic-theme-md3';\n\n// Angular\nprovideIonicAngular({\n    ...\n    navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,\n    popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,\n    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,\n});\n\n// React\nsetupIonicReact({\n    ...\n    navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,\n    popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,\n    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,\n});\n\n// Vue\ncreateApp(App)\n    .use(IonicVue, {\n        ...\n        navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,\n        popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,\n        popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,\n    });\n

If you installed only the MD3 theme, configure its animation as follows.

\n
import { isPlatform } from '@ionic/core'; // or @ionic/angular (Ionic 9), @ionic/angular/standalone (Ionic 8), @ionic/react, @ionic/vue\nimport { mdTransitionAnimation } from '@rdlabo/ionic-theme-md3';\n\n// Angular\nprovideIonicAngular({\n    ...\n    navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,\n});\n\n// React\nsetupIonicReact({\n    ...\n    navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,\n});\n\n// Vue\ncreateApp(App)\n    .use(IonicVue, {\n        ...\n        navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,\n})\n

Documentation

\n

Start with Installation. Pair this theme with @rdlabo/ionic-theme-ios26 when you need both platforms from one markup tree.

\n\n", + "html": "

Overview

\n

This library provides CSS/JS files that bring the Material Design 3 design system to Ionic applications. It updates the look and feel of Ionic components to match the latest Material Design 3 guidelines.

\n

This project aims to follow the core concepts of Ionic as closely as possible, while placing a strong emphasis on compatibility with @rdlabo/ionic-theme-ios26. Just as Ionic provides beautiful styling whether it displays the ios or md theme from a single HTML structure, our goal is to ensure that this theme and @rdlabo/ionic-theme-ios26 are fully compatible.

\n

If you don't know about @rdlabo/ionic-theme-ios26, you should definitely give it a try!

\n

👉️rdlabo-dev/ionic-theme-ios26

\n

Related Projects

\n

If you need a more comprehensive Material Design 3 implementation, you may also be interested in:

\n\n
\n

Note: This theme is purpose-built for compatibility with Ionic's design approach and @rdlabo/ionic-theme-ios26; it is not intended as a strict, full MD3 recreation.

\n
\n

Quick start

\n

After Installation, import the theme CSS and set navAnimation as shown below.

\n

Installation

\n

This is a CSS theme for extending your Ionic project. It does not work on its own, so use it together with the Ionic Framework.

\n
npm install @rdlabo/ionic-theme-md3\n

Note: If you use @ionic/core@ < 8.8.0, use @rdlabo/ionic-theme-md3@1.0.2.

\n

And import the theme in your project's main CSS file (e.g., src/styles.scss).

\n
@import '@rdlabo/ionic-theme-md3/dist/css/default-variables.css';\n@import '@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css';\n

Optional: use the MD3 and iOS 26 themes together

\n

Install the iOS 26 theme to style both Ionic modes from the same application.

\n

The current releases of both themes require @ionic/core 8.8.1 or later. Upgrade Ionic before using this setup if your application is on 8.8.0 or earlier.

\n
npm install @rdlabo/ionic-theme-ios26\n

When your global stylesheet uses Sass, initialize the themes in this order:

\n
@use '@rdlabo/ionic-theme-ios26/src/styles/default-variables.scss' as ios26-vars;\n@use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26.scss';\n@use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class.scss';\n@use '@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect.scss';\n@use '@rdlabo/ionic-theme-md3/dist/css/default-variables.css' as md3-vars;\n@use '@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css';\n

The example uses Ionic's class-based dark mode. Your global stylesheet must also load Ionic's matching dark palette, such as @ionic/angular/css/palettes/dark.class.css for Angular. When using dark-system or dark-always, select the same variant for both Ionic's palette and the iOS 26 theme. See Ionic's Dark Mode documentation. The explicit ios26-vars and md3-vars namespaces prevent the two variable modules from using the same default namespace.

\n

Configure both transition implementations when both themes are installed:

\n
import { isPlatform } from '@ionic/core'; // or @ionic/angular (Ionic 9), @ionic/angular/standalone (Ionic 8), @ionic/react, @ionic/vue\nimport { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios26';\nimport { mdTransitionAnimation } from '@rdlabo/ionic-theme-md3';\n\n// Angular\nprovideIonicAngular({\n    ...\n    navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,\n    popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,\n    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,\n});\n\n// React\nsetupIonicReact({\n    ...\n    navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,\n    popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,\n    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,\n});\n\n// Vue\ncreateApp(App)\n    .use(IonicVue, {\n        ...\n        navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,\n        popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,\n        popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,\n    });\n

If you installed only the MD3 theme, configure its animation as follows.

\n
import { isPlatform } from '@ionic/core'; // or @ionic/angular (Ionic 9), @ionic/angular/standalone (Ionic 8), @ionic/react, @ionic/vue\nimport { mdTransitionAnimation } from '@rdlabo/ionic-theme-md3';\n\n// Angular\nprovideIonicAngular({\n    ...\n    navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,\n});\n\n// React\nsetupIonicReact({\n    ...\n    navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,\n});\n\n// Vue\ncreateApp(App)\n    .use(IonicVue, {\n        ...\n        navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,\n})\n

Documentation

\n

Start with Installation. Pair this theme with @rdlabo/ionic-theme-ios26 when you need both platforms from one markup tree.

\n\n", "headings": [ { "id": "overview",