Configurer le thème iOS 27

Donnez l’apparence iOS 27 à une application Ionic existante en quatre étapes. Ce guide utilise le thème iOS 27 seul avec le mode sombre système. Pour sélectionner iOS 26/27 selon le navigateur ou utiliser MD3, consultez les thèmes adaptatifs.

Avant de commencer

Utilisez une application Ionic Angular, React ou Vue existante avec Ionic >=8.8.1 <10. Conservez les imports CSS de base d’Ionic. Les applications uniquement Web n’ont pas besoin de projet Capacitor natif.

1. Installer le thème et Foldable

npm install @rdlabo/ionic-theme-ios27 @erkamyaman/capacitor-foldable

Capacitor Foldable est notre intégration standard pour l’état de l’appareil. Ses API de placement et de posture permettent à votre application de contrôler l’adaptation de la disposition ; après l’installation, raccordez les valeurs initiales et les événements de changement. Suivez le guide de disposition pour configurer celle de l’appareil.

2. Charger les styles

Ajoutez ces imports à votre feuille de style globale après les styles de base d’Ionic. Remplacez l’import d’une palette sombre Ionic existante au lieu d’en charger plusieurs :

@import '@ionic/core/css/palettes/dark.system.css';
@import '@rdlabo/ionic-theme-ios27/dist/css/default-variables.css';
@import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27.css';
@import '@rdlabo/ionic-theme-ios27/dist/css/md-remove-ios-class-effect.css';
@import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27-dark-system.css';

Choisir une paire pour le mode sombre

Utilisez une palette Ionic et une variante du thème correspondantes. Les chemins ci-dessous sont relatifs à @ionic/core/css/palettes/ et @rdlabo/ionic-theme-ios27/dist/css/ respectivement.

Si vous activez aussi Native UI, ces styles fournissent son marqueur d’apparence claire/sombre. Associez palette Ionic et variante du thème pour harmoniser contrôles Web et natifs. Consultez l’héritage de l’apparence native pour l’ordre de résolution et le comportement du rail partagé.

3. Configurer les animations Ionic

Définissez ces options dans votre initialisation Ionic existante, avant le rendu de l’application :

import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios27';

const ionicConfig = {
  mode: 'ios' as const,
  navAnimation: iosTransitionAnimation,
  popoverEnter: popoverEnterAnimation,
  popoverLeave: popoverLeaveAnimation,
};

Cet exemple utilise volontairement le mode ios pour afficher aussi le thème dans les navigateurs de bureau. Passez ionicConfig à l’initialiseur déjà utilisé par votre application :

Fusionnez avec les options existantes ; n’initialisez pas Ionic deux fois. Pour conserver Material Design sur Android, gardez votre sélection du mode selon la plateforme et appliquez ces animations uniquement à la configuration iOS. Consultez les thèmes adaptatifs pour un exemple complet tenant compte de la plateforme.

4. Prévisualiser votre premier écran

Démarrez votre serveur de développement habituel et ouvrez une page existante. Ajoutez ce balisage dans son ion-content (avec la syntaxe de composants de votre framework) :

<ion-list inset="true">
  <ion-item-group>
    <ion-item><ion-label>Notifications</ion-label></ion-item>
    <ion-item><ion-label>Appearance</ion-label></ion-item>
  </ion-item-group>
</ion-list>

Vous devriez voir un groupe en retrait aux bords arrondis. Basculez l’apparence du système entre clair et sombre, puis naviguez entre les pages pour observer la transition. Consultez Utiliser ion-item-group pour la structure des listes.

Étapes suivantes

• Personnaliser les styles et composants.
• Ajouter Native UI pour les contrôles pris en charge d’une application Capacitor iOS. Installer le thème ne suffit pas à activer les contrôles natifs.
• Ajouter Vertical Bars avec un thème existant.
• Migrer une application existante.