Personnalisation du thème

Avant tout chose...

Pour personnaliser le thème de l'application, vous devez dupliquer le dossier default dans le répertoire /dev/user-frontend-ionic/src/theme et le renommer avec le nom de votre choix. Si ce n'est pas déjà fait, il faudra également renommer le fichier theme.scss.dist en theme.scss. 

Logo de l'application et splashscreen

Le logo de l'app est l'icône qui permet d'identifier l'application sur le "bureau" du smartphone. Le splashscreen est l'image qui s'affiche le temps du chargement de l'application au démarrage de cette dernière. Ces deux images sont un peu particulières car elle doivent être présente dans des formats bien particuliers et à des endroits précis de l'arborescence des packages des applications iOS en Android.

On utilise donc l'outil Capacitor Assets qui à partir des fichiers images génère les divers formats et les copie au bon endroit dans les répertoires des applications iOs et android. 

Installer Capacitor Assets https://github.com/ionic-team/capacitor-assets avec la ligne de commande :

npm install --save-dev @capacitor/assets

Le logo et le splashscreen se trouvent par défaut dans /dev/user-frontend-ionic/src/theme/default/resources

Placer vos ressources à l'identique dans /dev/user-frontend-ionic/src/theme/<theme-name>/resources

Respecter les conventions de nommage et le mode simple (recommandé dans la documentation https://github.com/ionic-team/capacitor-assets)

/dev/user-frontend-ionic/src/theme/<theme-name>/resources
|--logo.png

Lancer la commande

cd /dev/user-frontend-ionic/
npx capacitor-assets generate --assetPath /src/theme/<theme-name>/resources

Il faudra au minimum une image nommée logo afin de générer toutes les assets nécessaires.

Si l'image du splashscreen n'est pas présente dans le dossier, la commande en générera en utilisant le logo. Elle propose d'ailleurs des options de positionnement, couleur de fond etc.

Enfin, ionic propose des options supplémentaires grâce à un plugin SplashScreen déclaré dans le fichier /dev/user-frontend-ionic/capacitor.ts

plugins: {
    SplashScreen: {
      androidScaleType: 'CENTER_CROP',
      splashFullScreen: true,
      splashImmersive: false,
      backgroundColor: '#ffffff',
    },

Les feuilles de style

Pour que le thème soit pris en compte, il faut modifier les imports dans le fichier theme.scss.

Par exemple, si vous avez défini de nouvelles variables dans un nouveau répertoire, il faudra modifier la ligne @import "./default/app-theme-variables.scss"; en @import "./<theme-name>/app-theme-variables.scss"; ou <theme-name> et le nom de votre nouveau répertoire.

Tous les éléments dans le répertoire /src/theme seront ignorés du git, sauf le fichier theme.scss.dist et le dossier /default, vous êtes donc libre d'organiser la structure du sous-répertoire.

Les icônes, logo, et polices

Traductions

Tour guidé

Dans le fichier /dev/user-frontend-ionic/src/environments/environment.ts paramétrer :

• guidedTourEnabled : Activer ou non le tour guidé true/false

export const environment = {
  [...]
  guidedTourEnabled: true
};