Dans Experience Builder, le thème est un ensemble de spécifications de conception qui définissent en grande partie l’apparence de votre application. Vous pouvez utiliser les paramètres du thème pour définir globalement les couleurs, les polices, les styles de bouton et les autres paramètres d’apparence dans l’ensemble de votre application, ce qui vous évite d’avoir à modifier ces paramètres pour chaque widget et d’autres éléments de l’application.
Les paramètres du thème définissent les couleurs principale et secondaire, les couleurs fonctionnelles qui indiquent les informations, la réussite, les avertissements, les erreurs, et les couleurs neutres. Vous pouvez personnaliser toutes ces couleurs pour vous assurer que l’identité visuelle de votre application est cohérente avec la marque de votre organisation ou avec vos préférences personnelles. Vous pouvez définir les couleurs de surfaces, telles que des pages, des cellules du widget Table et des fenêtres, ainsi que les couleurs d’éléments interactifs, tels que des boutons de liste déroulante, des boutons bascule activés ou désactivés et l’indicateur de focus clavier. Le thème a également une influence sur la typographie, le rayon de bordure des éléments de l’application, le style de soulignement pour le texte du lien, et bien plus encore. Le thème n’affecte pas la mise en page ni le contenu de votre application.
Le thème définit l’apparence par défaut de nombreux éléments de l’application. Cependant, dans le widget, la page et d’autres paramètres d’élément, vous pouvez remplacer le thème de l’application pour modifier l’apparence d’un élément individuel.
Pour voir les paramètres du thème d’un modèle ou d’une application Experience Builder, cliquez sur Theme (Thème) pour ouvrir le volet Theme (Thème).
Choisir un thème
Lorsque vous ouvrez le volet Theme (Thème), une liste de thèmes préconçus s’affiche. Les icônes sur les miniatures du thème indiquent s’il s’agit d’un thème clair 
ou foncé 
.
Vous pouvez choisir parmi les thèmes préconçus suivants :
- Prime (Principal) : thème clair avec le bleu et le violet comme couleurs principale et secondaire. Il s’agit du thème par défaut.
- Astro : thème foncé avec le bleu et le violet comme couleurs principale et secondaire.
- Ocean (Océan) : thème clair avec le bleu et le vert comme couleurs principale et secondaire.
- Velvet (Velours) : thème clair avec le rouge et le bleu comme couleurs principale et secondaire.
- Abyss (Abysse) : thème foncé avec le violet et le bleu comme couleurs principale et secondaire.
- Meadow (Prairie) : thème clair avec le vert et le marron comme couleurs principale et secondaire.
- Shared theme (Thème partagé) : synchronisez le thème avec le paramètre de thème partagé de votre organisation. Vous ne pouvez pas personnaliser la couleur, la typographie ou tous les autres paramètres du thème lorsque vous choisissez ce thème. Si vous ne choisissez pas ce thème, vous pouvez tout de même sélectionner des couleurs du thème partagé de l’organisation lorsque vous configurez les paramètres de couleurs d’un widget.
Remarque :
La mise à jour d’octobre 2025 d’ArcGIS Online a introduit un nouveau système de thème. Toutes les applications créées après cette mise à jour utilisent le nouveau système. Les applications créées avant cette mise à jour conservent les thèmes du système précédent, sauf si vous les modifiez dans les paramètres Theme (Thème).
Notez que si vous passez d’un ancien thème à un nouveau thème dans une application existante, certaines parties de votre application peuvent prendre une apparence inattendue, car plusieurs variables de thème ne sont pas appariées de la même façon. Il est conseillé de conserver l’ancien thème d’application.
Si vous basculez vers un nouveau thème, choisissez-en un avec le même mode que l’ancien. Passez par exemple d’un ancien thème clair à un nouveau thème clair, ou d’un ancien thème foncé à un nouveau thème foncé.
Personnaliser le thème
Une fois que vous avez sélectionné un thème, cliquez sur Customize (Personnaliser) pour afficher des paramètres de thème supplémentaires.
Remarque :
Cliquez sur Reset (Réinitialiser) pour restaurer les paramètres par défaut d’un thème.
Paramètres de couleur
Les paramètres de l’onglet Color (Couleur) définissent les couleurs pour les différentes parties de votre application.
Vous pouvez utiliser le sélecteur de couleurs pour définir les couleurs personnalisées, les couleurs fonctionnelles, les couleurs neutres, les couleurs de surface et les couleurs d’élément interactif.
Couleurs personnalisées et fonctionnelles
Les couleurs personnalisées sont celles qui sont les plus utilisées dans l’ensemble de votre application. Il s’agit des couleurs principales utilisées pour attirer l’attention et communiquer de façon interactive.
- Les couleurs principales sont destinées aux composants les plus importants de l’interface utilisateur, tels que les boutons d’action flottants, les boutons à mettre en évidence et les éléments actifs. Il est conseillé de les utiliser pour les remplissages, le texte et les icônes des éléments à mettre en évidence.
- Les couleurs secondaires sont utilisées pour les remplissages, le texte et les icônes de moindre importance dans l’interface utilisateur.
Les couleurs fonctionnelles sont utilisées dans les messages d’alerte, comme ceux qui s’affichent lorsque les widgets exécutent correctement une tâche.
- Les couleurs Info sont utilisées dans les messages d’information.
- Les couleurs Success (Réussite) sont utilisées pour les messages d’état de réussite, par exemple ceux qui s’affichent lorsque le processus du widget aboutit.
- Les couleurs Warning (Avertissement) sont utilisées pour les messages d’avertissement.
- Les couleurs Error (Erreur) sont utilisées pour les messages d’erreur, par exemple ceux qui s’affichent lorsque le processus du widget échoue.
Vous pouvez utiliser le sélecteur de couleurs pour définir une couleur de base pour chacune des six couleurs personnalisées et fonctionnelles.
Pour que les applications soient plus dynamiques, Experience Builder utilise différentes nuances de chaque couleur autour de l’application. En regard de chaque couleur personnalisée et fonctionnelle, un aperçu montre la façon dont le texte s’affiche sur trois nuances : une nuance claire, une nuance principale et une nuance foncée. La couleur du texte est automatiquement sélectionnée pour optimiser le contraste et l’affichage.
Par exemple, les boutons utilisent les trois nuances de couleur pour communiquer les états et l’interaction. Dans le diagramme suivant, le bouton utilise la couleur principale du thème. La couleur par défaut du bouton est la nuance principale, la couleur du survol est la nuance foncée et la couleur de l’état activé est la nuance claire.
Remarque :
La couleur de l’état activé de certains boutons peut sembler différente de la nuance claire, car certains boutons présentent un effet d’animation en domino lorsque vous appuyez dessus. L’animation inclut une transparence qui fait en sorte que la couleur du bouton semble plus claire.
Les messages d’information, de réussite, d’avertissement et d’erreur utilisent les trois nuances de couleur.
Si vous modifiez l’une des couleurs personnalisées ou fonctionnelles par défaut, vous pouvez cocher la case Optimize my color choices (Optimiser mes choix de couleurs) pour générer automatiquement les nuances de vos couleurs sélectionnées qui sont les mieux adaptées au contraste et à l’affichage.
Couleurs neutres
Les couleurs neutres définissent les couleurs fondamentales de votre application. Les couleurs neutres définissent en particulier la couleur par défaut du texte, des arrière-plans, des bordures et des lignes de séparation.
Sous Neutral (Neutre), vous pouvez utiliser le sélecteur de couleurs pour sélectionner une couleur neutre de base. À partir de cette couleur de base, 13 nuances s’affichent. Il s’agit de toutes les couleurs neutres utilisées dans l’ensemble de l’application.
Les couleurs personnalisées, fonctionnelles et neutres constituent ensemble les couleurs du thème qui s’affichent dans les paramètres de widget, les paramètres de page et les paramètres d’autres éléments du sélecteur de couleurs, qui permettent de définir une couleur.
Couleurs de surface et d’élément interactif
Vous pouvez utiliser les paramètres de couleur sous Surface pour définir les couleurs des arrière-plans d’élément et du texte qui apparaît sur ces éléments. Par défaut, ces couleurs sont liées aux couleurs neutres.
- Les couleurs de page s’appliquent aux pages, à la section et aux scènes principales des groupes d’écrans.
- Les couleurs de conteneur s’appliquent aux widgets Card (Fiche), aux éléments de liste des widgets List (Liste) et aux cellules des widgets Table.
- Les couleurs de superposition s’appliquent aux fenêtres, aux info-bulles, aux fenêtres modales et aux fenêtres contextuelles.
Vous pouvez utiliser les paramètres de couleur sous Interactive elements (Éléments interactifs) pour définir les couleurs d’éléments tels que les boutons de menu déroulant, les boutons de pagination, les onglets actifs dans les menus et les boutons bascule.
- La couleur par défaut s’applique à l’état par défaut des boutons interactifs. Par défaut, cette couleur est liée aux couleurs neutres.
- L’état sélectionné s’applique à l’état sélectionné des boutons interactifs. Par défaut, cette couleur est liée à la couleur principale du thème.
- La couleur Keyboard focus (Focus clavier) s’applique à l’indicateur qui montre quel élément interactif de la page d’application a un focus clavier. Cela est utile pour parcourir l’application avec le clavier. Par défaut, cette couleur est liée à la couleur principale du thème.
Remarque :
Par défaut, toutes les couleurs d’élément interactif et de surface sont liées, soit aux couleurs neutres, soit à la couleur principale du thème. Toute modification de la couleur neutre ou principale du thème modifie également les couleurs liées. Si vous modifiez l’une des couleurs d’élément interactif ou de surface avec leurs sélecteurs de couleur associés, les couleurs ne sont plus liées à la couleur principale ou neutre du thème, mais vous pouvez cliquer sur Reset (Réinitialiser) pour les lier de nouveau.
Lorsque vous modifiez l’une des couleurs de surface ou d’élément interactif, les couleurs du texte associé sont automatiquement converties en couleurs suffisamment contrastées. Le taux de contraste minimal est 3:1. Si vous remplacez une couleur de texte par une couleur qui ne respecte pas la norme de contraste, un avertissement vous invitant à choisir une autre couleur s’affiche.
Paramètres de typographie
L’onglet Typography (Typographie) vous permet de modifier les paramètres de texte suivants :
- Font (Police) : sélectionnez les polices pour l’en-tête et le corps du texte.
- Headings (En-têtes) : sélectionnez une police pour le texte d’en-tête.
- Body (Corps) : sélectionnez une police pour le corps du texte. Le corps du texte inclut tous les autres textes de l’application, notamment les étiquettes.
- Font size (Taille de police) : utilisez l’échelle pour définir la taille de police générale. Les tailles varient de Very small (Très petite) à Very large (Très grande). Les plus petites tailles de police permettent de faire rentrer davantage de texte dans une zone, tandis que les tailles plus grandes facilitent la lisibilité.
Experience Builder inclut des polices par défaut. Vous pouvez ajouter des polices en cliquant sur Add Google Fonts (Ajouter Google Fonts) dans les menus déroulants de police. La fenêtre Add Google Fonts (Ajouter Google Fonts) s’affiche : elle vous permet de saisir une URL de police dans la zone de texte. Cliquez sur OK pour ajouter la police.
Parcourir les familles de polices disponibles sur Google Fonts
Paramètres du thème More (Plus)
L’onglet More (Plus) vous permet de modifier les paramètres suivants :
- Border radius (Rayon de bordure) : sélectionnez un style général pour le rayon de bordure des éléments de l’application. Le rayon de bordure affecte la forme des angles pour des éléments comme les conteneurs, les boutons et les zones de saisie. Vous pouvez décider que le rayon de bordure soit défini par le thème sélectionné, ou vous pouvez sélectionner None (Aucun), Small (Petit), Medium (Moyen), Large (Grand) ou Extra Large (Très grand).
- Components (Composants) : personnalisez l’apparence des champs en entrée et du texte du lien.
- Input field (Champ en entrée) : sélectionnez une couleur pour les champs en entrée. Les champs en entrée incluent les zones de texte en entrée, les zones de recherche et les états par défaut des cases à cocher, des cases d’option et des boutons bascule.
- Link (Lien) : sélectionnez un style de soulignement et une couleur pour le texte du lien. Pour le style de soulignement, vous pouvez décider qu’il soit défini par le thème sélectionné, ou vous pouvez sélectionner No underline (Sans trait de soulignement), Solid underline (Trait de soulignement continu) ou Dotted underline (Trait de soulignement discontinu).
Vous avez un commentaire à formuler concernant cette rubrique ?