Jeu de couleurs du thème
La page Theme Color Scheme permet aux admins de gérer la palette de couleurs utilisée dans l'application web. Ces réglages gardent l'expérience utilisateur cohérente tout en permettant des couleurs différentes selon les groupes de profil utilisateur.
- Page admin du jeu de couleurs :
https://admin.acusolo.net/admin/app-settings/color-scheme
Gérer les couleurs du thème
Les admins peuvent mettre à jour les couleurs depuis la page de réglages du jeu de couleurs.
La page est organisée par champ de couleur. Chaque champ possède des valeurs séparées pour :
- Male
- Female
- Other
La valeur Other est optionnelle. Elle peut être utilisée comme groupe neutre ou valeur de secours si nécessaire.
Comportement des champs couleur
Chaque couleur peut être modifiée avec :
- Un sélecteur visuel de couleur.
- Un champ texte de couleur.
Les admins peuvent utiliser Reset pour revenir aux valeurs actuellement enregistrées, ou Save Color Scheme pour appliquer les nouvelles valeurs.
Les groupes de couleur vides sont ignorés à l'enregistrement. Cela évite d'enregistrer des lignes incomplètes par erreur.
Champs de couleur
| Champ | Rôle |
|---|---|
| Accent Color | Important. Couleur principale de mise en avant utilisée pour les états sélectionnés, les accents de progression, les éléments actifs et d'autres accents visibles de la marque. |
| Main Text Color | Important. Couleur principale du texte lisible dans les zones concernées par le thème. |
| Subtle Color | Important. Couleur de soutien plus douce pour les accents légers ou l'emphase secondaire. |
| Sub Text Color | Couleur du texte secondaire ou moins important. |
| Dark Background Color | Couleur de fond utilisée dans les zones sombres. |
| Light Background Color | Couleur de fond utilisée dans les zones claires. |
| Border Color | Couleur principale des bordures. |
| Light Border Color | Couleur de bordure plus douce pour les surfaces claires. |
| Button Color | Couleur de fond des boutons. |
| Button Text Color | Couleur du texte dans les boutons. |
| Button Border Color | Couleur de bordure des boutons. |
Les champs marqués Important doivent être vérifiés avec attention, car ils peuvent affecter les zones les plus visibles de l'application web.
Exemple de couleur d'accent sur le web
L'application web peut utiliser la couleur d'accent enregistrée pour styliser des éléments visibles.
Dans l'exemple, la couleur d'accent est utilisée pour des contrôles mis en avant et des éléments de progression. Quand l'admin change cette couleur, les zones correspondantes de l'application web peuvent changer visuellement pour les utilisateurs qui reçoivent ce groupe de couleurs.
Comportement par groupe de profil
Le jeu de couleurs est enregistré séparément pour Male, Female et Other.
Quand un utilisateur a un genre défini dans son profil, l'application web peut appliquer le groupe de couleurs correspondant :
- Un utilisateur Male reçoit les valeurs Male.
- Un utilisateur Female reçoit les valeurs Female.
- Les cas Other ou de secours peuvent utiliser les valeurs Other lorsque c'est pris en charge.
Si aucune couleur correspondante n'est disponible pour l'utilisateur, l'application web continue d'utiliser ses couleurs par défaut.
Reset et sauvegarde
| Action | Rôle |
|---|---|
| Reset | Restaure le formulaire avec les dernières valeurs enregistrées. Cette action ne change rien définitivement par elle-même. |
| Save Color Scheme | Enregistre le jeu de couleurs mis à jour afin que l'application web puisse l'utiliser. |
Après sauvegarde, les utilisateurs peuvent devoir recharger ou revisiter les pages concernées avant de voir les dernières couleurs.
Règles importantes
- Utiliser des valeurs de couleur valides.
- Garder un contraste suffisant entre les textes et les fonds.
- Vérifier les champs importants avant d'enregistrer.
- Éviter un texte de bouton très clair sur un fond de bouton clair.
- Éviter un texte très sombre sur un fond sombre.
- Utiliser la couleur d'accent avec prudence, car elle peut affecter des mises en avant visibles.
- Tester séparément les jeux Male et Female, car les utilisateurs peuvent voir des couleurs différentes selon leur profil.
- Garder le groupe Other neutre s'il sert de valeur de secours.
Cas d'erreur fréquents
Les admins peuvent rencontrer ces cas :
- Une valeur de couleur est vide ou invalide.
- Le texte devient difficile à lire à cause d'un contraste trop faible.
- Un bouton devient difficile à voir parce que la couleur du bouton et celle du texte sont trop proches.
- Un utilisateur ne voit pas les couleurs attendues parce que son groupe de profil ne correspond pas au groupe modifié.
- La page affiche encore l'ancienne couleur jusqu'à ce que l'utilisateur recharge ou que les derniers réglages soient appliqués.
Flux global
- L'admin ouvre la page de réglages du jeu de couleurs.
- L'admin modifie les couleurs pour Male, Female et éventuellement Other.
- L'admin vérifie les champs importants comme Accent Color, Main Text Color et Subtle Color.
- L'admin enregistre le jeu de couleurs.
- L'application web applique le groupe de couleurs correspondant aux utilisateurs lorsque c'est pris en charge.
- Les utilisateurs voient les couleurs d'accent et de thème mises à jour dans les zones concernées.