Configurer un Next Experience thème

Ajoutez les styles que vous avez créés à votre Next Experience thème pour modifier l’apparence de l’expérience utilisateur.

Avant de commencer

Assurez-vous que les propriétés système suivantes qui se trouvent dans sys_properties.list sont définies sur Vrai :

• glide.ui.polaris.experience
• glide.ui.polaris.dark_themes_enabled: pour réutiliser la Next Experience variante sombre dans ce thème.

Rôle requis : admin

Pourquoi et quand exécuter cette tâche

Il Next Experience comprend deux thèmes, Polaris et Coral. Vous pouvez réutiliser ou personnaliser l’un ou l’autre des thèmes comme point de départ lorsque vous créez ou modifiez vos propres thèmes.

Pourquoi et quand exécuter cette tâche

Remarque :

Si vous personnalisez un thème que Générateur de thèmes vous avez créé et que vous saisissez un code JSON non valide, vous ne pouvez pas enregistrer votre enregistrement de thème. Lorsque vous travaillez dans l’enregistrement de thème UX, vous pouvez accéder à la page Éditeur à l’aide du bouton Ouvrir dans le générateur de thèmes . Pour plus d'informations, consultez Gérer ou modifier un thème avec Générateur de thèmes.

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Gestion des thèmes > Thèmes.
2. Créez un enregistrement de thème en sélectionnant Nouveau.
3. Entrez un nom et une description pour votre thème.
4. Sélectionnez l’icône Actions supplémentaires, puis Enregistrer.
5. Dans l’onglet Compositional : Thème de l’application , insérez des lignes pour ajouter des styles associés à votre thème.
   Vous attribuez des valeurs dans quatre colonnes :

   Applicabilité

   Remplace le thème de base. Les utilisateurs qui rencontrent les contraintes d’applicabilité voient ces remplacements dans leur thème plutôt que dans le style de base. Par exemple, un style avec différentes polices peut être appliqué aux gestionnaires. Les utilisateurs qui répondent à l’applicabilité du gestionnaire voient les différentes polices dans l’interface Next Experience utilisateur, qui remplace les valeurs de thème du système de base. Les administrateurs n’ont pas besoin de copier ou de créer un thème entier avec des modifications pour l’audience applicable.

   Remarque :

   Si vous laissez la contrainte d’applicabilité vide, le style sera appliqué à tous les utilisateurs.

   Ordre

   Spécifie quand le style est appliqué. Plus l’ordre est élevé, plus sa priorité est grande.

   Remarque :

   Si vous souhaitez utiliser un style personnalisé, assurez-vous que votre numéro de commande de style est supérieur au style standard Polaris ou Corail.

   Style

   Configure quatre styles principaux. Vous ne pouvez pas modifier les noms de style utilisés dans les thèmes Polaris ou Coral fournis, mais vous pouvez copier le code JSON associé à chaque style à partir de l’un ou l’autre des thèmes et le coller et le modifier dans le formulaire de votre style personnalisé.

   • Couleurs: Spécifie les propriétés de couleur du thème et toutes les variantes de base que vous souhaitez ajouter. Dans la section de base du style de couleur, un sous-ensemble des couleurs utilisées par le thème est défini avec des valeurs RVB (Rouge, Vert et Bleu). Le thème génère plus de 20 dégradés de ces couleurs dans l’application.
   • Forme et apparence : Spécifie l’apparence des bordures, ainsi que des boutons et autres contrôles de l’interface utilisateur.
   • Imagerie: Ajoute des images qui sont utilisées dans le thème de votre application.
   • Typographie: Spécifie les polices utilisées dans l’ensemble de l’application.

   Type

   Spécifie deux types : Core et Variant. Les styles de base comprennent la couleur, la forme, la typographie et l’imagerie. Les variantes spécifient une version différente du thème, comme les différentes couleurs que les utilisateurs peuvent sélectionner. La variante la plus courante est une version sombre du thème. Le thème sombre est la seule variante livrée avec Next Experience. Pour plus d'informations, consultez Utiliser des thèmes dans Next Experience.

6. Sélectionnez le champ Style , puis l’icône de recherche .
7. Sélectionnez Nouveau.
8. Sélectionnez les couleurs primaires, secondaires et neutres.
   Remarque :

   Un thème est composé de plusieurs variables, vous remarquerez donc peut-être la coloration par défaut du thème Polaris ou Corail à différents endroits.
9. Lorsque vous avez les couleurs des marques de votre organisation, accédez au générateur de couleurs à l’adresse https://theme.deoprototypes.com/color-generator-algo-v1.
10. Sélectionnez le bouton Générer automatiquement .

    Une fenêtre modale s’affiche et vous demande de saisir les trois couleurs de votre organisation.

11. Saisissez vos valeurs de code hexadécimal pour les couleurs de votre organisation.
12. Sélectionnez Générer.
13. Rassemblez vos variables CSS en sélectionnant Copier JSON.
14. Remplissez le formulaire Style UX.

    Champ	Description
    Nom	Nom de votre style UX.
    Type	Principal Variante Pour plus d’informations sur les types, voir Différence entre les styles de base et les variantes.
    Style	Valeurs pour les couleurs, les formes et les formes. Certaines valeurs sont des couleurs et d’autres, comme les bordures, sont des valeurs en pixels. Important : Le code JSON doit être renvoyé à la ligne comme illustré dans l’exemple suivant.
    Application	Champ d’application du style UX.

15. Sélectionnez Soumettre.
16. Sélectionnez Mettre à jour.

Que faire ensuite

Pour publier votre thème personnalisé, reportez-vous à la section Publier plusieurs thèmes dans Next Experience.