Avant tout chose...
Pour personnaliser le thème de l'application, vous devez dupliquer le dossier app-theme-dist dans le répertoire /dev/user-frontend-ionic/src/theme et le renommer en app-theme (le nom du nouveau dossier doit être respecté, car certains éléments comme les modules importent les feuilles de style via un chemin absolu déjà établi). 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.
Attention
Il faut avoir buildé une première fois les applications clientes et donc avoir les répertoire /ios et /android à la racine de l'arborescence des sources du client /dev/user-frontend-ionic
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/app-theme-dist/resources
Placer vos ressources à l'identique dans /dev/user-frontend-ionic/src/theme/app-theme/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/app-theme/resources |--logo.png
Lancer la commande
cd /dev/user-frontend-ionic/ npx capacitor-assets generate --assetPath /src/theme/app-theme/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.
Attention
Bug de l'outil constaté avec les fichiers SVG dans la génération des ressources pour la PWA
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
Tous les éléments dans le répertoire /src/theme sont ignorés du git, sauf le fichier theme.scss.dist et le dossier /app-theme-dist.
Modules
Les feuilles de style des modules sont dans le répertoire /src/theme/app-theme/styles.
Pour personnaliser le style des modules, vous pouvez modifier directement les fichiers présents dans le répertoire, ils ne seront pas pris en compte dans les commits.
Les icônes, logo, et polices
Tous les fichiers ressources (icones, police, logos) appelés depuis les fichiers scss doivent se trouver dans un répertoire /assets du thème.
Ajouter des icônes personnalisées
Un mécanisme a été mis en place pour permettre l'ajout d'icônes et les utiliser comme des icônes natives Ionic. Par exemple : <ion-icon name="[nom-icône]">, où [nom-icône] représente simplement le nom du fichier SVG.
Pour ajouter une nouvelle icône, collez simplement celle-ci au format SVG dans un des dossiers d'icônes features/, flag/, navigation/, social-network/, static-pages/ présents dans src/theme/app-theme/assets/icons/
Vous avez également la possibilité d'ajouter une nouvelle collection d'icônes au format SVG à votre client.
Pour cela, placez votre dossier dans src/theme/app-theme/assets/icons/ et déclarez le dossier dans le fichier angular.json au niveau la propriété projects.app.architect.build.options.assets
{
"glob": "**/*.svg",
"input": "src/theme/app-theme/assets/icons/nouveau_dossier",
"output": "./svg"
},
Votre nouveau set d'icônes sera automatiquement intégré par ionic.
Vos icônes doivent être impérativement au format SVG, en veillant bien à ce que l'attribut fill soit retiré (dans les balises <svg> et <path>)
Traductions
Tous les fichiers de traduction i18n doivent se trouver dans un répertoire /assets/i18n du thème.
Tour guidé
Tous les fichiers images appelés depuis tour guidé doivent se trouver dans un répertoire /assets/guided-tour du thème.
Le tour guidé repose sur un module Angular, guided-tour, placé à la racine du répertoire du thème. Les fichiers chargés de déclarer la navigation du tour guidé doivent se trouver dans ce module.
Les tours guidés à exporter sont :
- anonymousSteps : tour guidé lorsque l'utilisateur n'est pas connecté
- loggedSteps : tour guidé lorsque l'utilisateur est connecté
Pour désactiver le tour guidé, référez-vous à Paramétrages des clients.